Backgrid.js使用笔记

阅读更多

最近项目上需要一个 可以对表格数据进行修改的功能，本身项目没有引用像Extjs，Dojo等整体的JS UI框架，所以想找个专门对于数据表格进行编辑展示的小的框架，看了好几款，最后选定了Backgrid.js这个框架。

大致的说下我对这个框架的认识：

    1.该框架需要依赖Jquery，underscore.js, Backbone.js,看了下Backgrid.js官网上的示例代码，代码里用到的代码还需要去了解下Backbone 的相关模型概念。

   2.Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。

   

测试代码如下：

  引入核心的js css 文件，我用到了复选框全选的功能，需要引入 select-all 的相关文件（这个你用到相关功能可以在官网页面 选择引入额外功能的相关文件）， 

href="./css/backgrid.min.css" rel="stylesheet" type="text/css" />
href="./css/backgrid-select-all.min.css" rel="stylesheet" type="text/css" />

js代码部分：

 

 

    var Territory = Backbone.Model.extend({});

    var Territories = Backbone.Collection.extend({
      model: Territory,
      url: "http://backgridjs.com/examples/territories.json11"
    });

    var territories = new Territories();

    //创建 column信息
    var columns = [{
    name: "id", // The key of the model attribute
    label: "ID", // The name to display in the header
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
  }, {
    name: "name",
    label: "Name",
    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
  }, {
    name: "pop",
    label: "Population",
    cell: "integer" // An integer cell is a number cell that displays humanized integers
  }, {
    name: "percentage",
    label: "% of World Population",
    cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "date",
    label: "Date",
    cell: "date"
  }, {
    name: "url",
    label: "URL",
    cell: "uri" // Renders the value in an HTML anchor element
}];

// Initialize a new Grid instance
var grid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all"
  }].concat(columns),
 collection: territories
  //collections:[{"name": "Afghanistan", "url": "http://en.wikipedia.org/wiki/Afghanistan", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": 1}, {"name": "Albania", "url": "http://en.wikipedia.org/wiki/Albania", "pop": 2831741, "date": "2011-10-01", "percentage": 0.04, "id": 2}]
});

// Render the grid and attach the root to your HTML document
$("#table-content").append(grid.render().el);

// Fetch some countries from the url
territories.fetch({reset: true});

//测试方法
    var glabal_i =0;
    $("#mirstest").click(function(){
        var removeRows = grid.collection.length;
        console.log(removeRows);
        console.log(grid.collection.models);//获取当前表格的数据
        //console.log(grid.collection.get(93).attributes);// 获取对应Model 对应的数据对象

        var InsertModel = Backbone.Model.extend({});
        var addNewModel = new InsertModel();
        var hellModel = new InsertModel();

        hellModel.set({"name": "测试数据-"+i, "url": "http://www.baidu.com", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": glabal_i++});
        addNewModel.set({"name": "新的数据"+i, "url": "http://en.wikipedia.org/wiki/Afghanistan", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": glabal_i++});
        grid.insertRow(addNewModel);
        grid.insertRow(hellModel);

        var selectedModels = grid.getSelectedModels();

        // To deselect selected models
        //grid.clearSelectedModels();

    });