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://pwwzsj.com/article/dsojoop.html