0

tablesorter 插件复制从输入表单添加到表中的数据，然后通过单击重复数据的标题进行排序。页面刷新后表格按进入顺序显示输入的数据

任何人都可以帮助这个 http://jsfiddle.net/KrRyb/

谢谢 

window.BookView = Backbone.View.extend({
tagName: "tr",

events: {
},

template: $("#book-item").template(),

initialize: function(){
  _.bindAll(this, "render");
},

render: function(){
  var element = jQuery.tmpl(this.template, this.model.toJSON());
  $(this.el).html(element);
  return this;
  }
  });
  $(document).ready(function() 
  { 
    $("#books-table").tablesorter(); 
  } 
  ); 
window.AppView = Backbone.View.extend({
el: $("#app"),
events: {
  "click .tabs a": "tabs",
        "click #add-book": "createBook",
        "click .edit-book": "editBook",
        "click #update-book": "updateBook",         
        "click .delete-book": "deleteBook",
        "click #selectall": "selectAllBooks",
        "click .select": "selectBookRow",   
        "click #manage tbody tr": "selectBookRow",
        "click #deleteall": "deleteAll"                                                 
},

initialize: function(){
  _.bindAll(this, "render", "tabs", "addAll", "addBook", "createBook", "editBook",                "deleteBook");
        this.activeBookId = null;
        this.$("#create").show();
  Books.bind('add', this.addBook); 
  Books.bind('reset', this.addAll);
  Books.fetch();
},

selectAllBooks: function(el){
    var target = $(el.target), rows = this.$('#manage tr:not(#select-info)');
        if(target.is(':checked'))
        {
                 rows.css({background:"whiteSmoke"}).find('.select').prop("checked", true);
        }
        else
        {
             rows.css({background:"white"}).find('.select').prop("checked", false);
        }
        this.showSelected();
    },

    selectBookRow: function(el){
        var target = $(el.target), row = target.parents("tr"), checkbox =  row.find('.select');
        if(checkbox.is(':checked'))
        {
            row.css({background:"white"});
            checkbox.prop("checked", false);
        }
        else
        {
            row.css({background:"whiteSmoke"});
            checkbox.prop("checked", true);
        }
        this.showSelected();            
    },      

    showSelected: function(){
        var info = $('#select-info'), count = $('#manage     .select:checked').length, word = count>1?"books":"book",
            html = '<tr id="select-info"><td colspan="6">('+count+')   '+word+' selected. <a id="deleteall" href="javascript:void(0);">delete</a></td></tr>';
        if(Books.length>0)
        {
            if(info.length === 0)
            {
              $('#manage tbody').prepend(html); 
            }
            else if(count>0)
            {
                info.replaceWith($(html));
            }
            else
            {
                info.remove();
            }
        }   
    },

    deleteAll: function(){  
        $('#manage tbody').find('input:checked').each(function() {
            var that = $(this);
            Books.get(that.data('id')).destroy();
            that.parents('tr').remove();
        });
        $('#select-info').hide();
        $('#selectall').prop("checked", false);
    },

    tabs: function(e){
      var target = $(e.target);
      $('.tabs a').removeClass('active');
      target.addClass('active');
      this.$('.content').hide();
      if(target.attr('id') === "create-tab")
      {
        this.$("#create").show();   
      }
      else
      { 
          this.addAll();
            this.$('#selectall').prop("checked", false);
        this.$("#manage").show();       
      }
    },

    editBook: function(el){
        var target = $(el.target), book = Books.get(target.data('id'));
        this.activeBookId = target.data('id');
        $('#book-edit-form').find(':input[name]:enabled').each(function() {
            var self = $(this);
            self.val(book.attributes[self.attr('name')]);
        });
        this.$('.content').hide();
        this.$('#manage-edit').show();
    },

    updateBook: function(el){
        var target = $(el.target), data = {};
        $('#book-edit-form').find(':input[name]:enabled').each(function() {
            var self = $(this);
            data[self.attr('name')] = self.val();
        });
        Books.get(this.activeBookId).set(data).save();
        this.addAll();
        this.$('.content').hide();
        this.$('#manage').show();
    },

    deleteBook: function(el){
        var target = $(el.target);
        Books.get(target.data('id')).destroy();
        target.parents('tr').remove();
    },      

  addAll: function(){
      this.$("#manage table tbody").empty();    
    Books.each(this.addBook)
  },

  addBook: function(book){
    var view = new BookView({model: book});
    this.$("#manage table tbody").prepend(view.render().el);
  },

   createBook: function(e){
        var data = {};
        $('#book-form').find(':input[name]:enabled').each(function() {
            var self = $(this);
            data[self.attr('name')] = self.val();
            self.val("");
        });
        Books.create(data);
  }
   });

    window.App = new AppView();

   window.AppController = Backbone.Router.extend({

  initialize: function(){
    $('.tabs a').removeClass('active');
    this.mainView = new window.AppView
  },

  routes: {
    "create":"create",
    "books":"books"
  },

  create: function() {
    $('.tabs a#create').addClass('active');
  },

  books: function() {
    $('.tabs a#books').addClass('active');
  }

      });

     window.App = new AppController();
     Backbone.history.start();

     });
4

1 回答 1

0

很难猜出您遇到的问题，但我认为如果您在模板呈现后放置 tablesorter 初始化代码，它可能会工作......

所以改变这个：

    render: function(){
      var element = jQuery.tmpl(this.template, this.model.toJSON());
      $(this.el).html(element);
      return this;
    }
  });
    $(document).ready(function() 
    { 
        $("#books-table").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

对此：

    render: function(){
      var element = jQuery.tmpl(this.template, this.model.toJSON());
      $(this.el).html(element);
      // initialize tablesorter here
      $("#books-table").tablesorter( {sortList: [[0,0], [1,0]]} );
      return this;
    }
  });
于 2012-11-16T14:46:28.123 回答