- A+
所属分类：Web前端
前端用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 }
其中的参数:
id : 前端页面表格的id
height : 表格控件的高度 (如果有分页操作 , 表格高度大于每页显示的最大高度的话 , 会不显示分页栏
pageSize : 每页最大行数
field : 从对象数组中取的属性
title : 对应 field , 表格表头上显示的每列的定义
data : 数据 对象数组
num : 数据的长度
例如:
<table id="table" data-options="fitColumns:true" class="easyui-datagrid" style="width:100%;height:100%;"> </table>
const data = [ { "id" : 1, "name" : "aaa", "age" : 23, "city" : "shenyang" }, { "id" : 2, "name" : "bbb", "age" : 22, "city" : "beijing" }, { "id" : 3, "name" : "ccc", "age" : 24, "city" : "shanghai" } ]
此时,如果想将以上数据生成表格
只需要调用上面的
paginationTable(id, height, pageSize, field, title, data, num)
方法
paginationTable("table",300,10, ['name','age','city'], ['名字','年龄','城市'], data, data.length)
如果数据没达到表格分页最少显示行数 , 会自动取消分页 ; 数据改变之后 , 如果数量达到分页要求 , 会自动分页
