最近项目上需要一个 可以对表格数据进行修改的功能,本身项目没有引用像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 的相关文件(这个你用到相关功能可以在官网页面 选择引入额外功能的相关文件),
<link href="./css/backgrid.min.css" rel="stylesheet" type="text/css" /> <link href="./css/backgrid-select-all.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="./js/underscore-min.js"></script> <script src="./js/backbone-min.js"></script> <script src="./js/backgrid.min.js"></script> <script src="./js/backgrid-select-all.min.js"></script>
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(); });
相关推荐
prototype.js开发笔记.doc prototype.js开发笔记.doc prototype.js开发笔记.doc prototype.js开发笔记.doc
vue.js是前端一个轻量级框架,使用相当灵活。可以将页面功能模块化开发。
HTML笔记. J2EE笔记. Javascript笔记. JAVA笔记.oracle 笔记.Linux笔记.tomcat笔记.面试问题.数据结构.听韩顺平的笔记.正则表达式.等,我是我在上大学时学习做的笔记,拿出来和大家共享。。
Manning.TypeScript.Quickly.2020 学习笔记 Manning.TypeScript.Quickly.2020 学习笔记 Manning.TypeScript.Quickly.2020 学习笔记 Manning.TypeScript.Quickly.2020 学习笔记 Manning.TypeScript.Quickly.2020 学习...
dwr 例子 jar包 engine.jsutil.js 学习笔记 绝对超值。
js3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rar
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端...
Node.js自学笔记
js3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rar
prototype.js开发笔记技术是前人在学习JS的过程中自己总结的一些方法 和笔记
js3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rarjs3笔记.rar
js6笔记.rarjs6笔记.rarjs6笔记.rarjs6笔记.rarjs6笔记.rarjs6笔记.rar
prototype.js开发笔记.pdf
date: 2014-03-03 layout: post title: Node.js 学习笔记 description:Node.js learning notes categories: - nodejs - javascript tags: - nodejs
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
Node.js学习笔记,希望节省你的学习成本。
入门Vue.js基础学习笔记记录,遇坑!