EasyUI Datagrid 数据网格

前端用easyUI开发时,官方给的文档指导太少,网上找的又很慢,因此,我总结了一个后台返回数据后,用easyUI生成表格的方法,可编辑可分页:

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的凤翔网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

 1 function paginationTable(id, height, pageSize, field, title, data, num) {
 2     for (var i = 0; i < field.length; i++) {
 3         liensAr.push({field: field[i], title: title[i], width: $(this).width() * 0.2, editor: 'text', align: 'center'});
 4     }
 5     tableArr.push(liensAr)
 6     var columns = JSON.parse(JSON.stringify(tableArr));
 7     if (num > pageSize) {
 8         $("#" + id).datagrid({//tab_openSub_mySub_tb为table标签的id
 9             pagination: true, //显示分页栏
10             height: height,
11             pageSize: pageSize,//分页条件
12             singleSelect: true,
13             columns: columns,
14             striped: true,
15             rownumbers: true
16         });
17 
18         $("#" + id).datagrid("loadData", data.slice(0, pageSize));
19 
20         var pager = $("#" + id).datagrid("getPager");//分页代码块
21         pager.pagination({
22             total: data.length,
23             onSelectPage: function (pageNo, pageSize) {
24                 var start = (pageNo - 1) * pageSize;
25                 var end = start + pageSize;
26                 $("#" + id).datagrid("loadData", data.slice(start, end));
27                 pager.pagination('refresh', {
28                     total: data.length,
29                     pageNumber: pageNo
30                 });
31             }
32         });
33         liensAr = [];
34         tableArr = [];
35     } else {
36         $("#" + id).datagrid({//tab_openSub_mySub_tb为table标签的id
37             height: height,
38             singleSelect: true,
39             columns: columns,
40             striped: true,
41             rownumbers: true
42         });
43 
44         $("#" + id).datagrid('loadData', data);
45         liensAr = [];
46         tableArr = [];
47     }
48 }

名称栏目：EasyUI Datagrid 数据网格
文章起源：http://cdiso.cn/article/dsojoop.html