EasyUI|EasyUI Datagrid 数据网格 EasyUIDatagrid数据网格

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

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

其中的参数:
id : 前端页面表格的id
height : 表格控件的高度 (如果有分页操作 , 表格高度大于每页显示的最大高度的话 , 会不显示分页栏
pageSize : 每页最大行数
field : 从对象数组中取的属性
title : 对应 field , 表格表头上显示的每列的定义
data : 数据对象数组
num : 数据的长度
例如:

const data = https://www.it610.com/article/[ {"id" : 1, "name" : "aaa", "age" : 23, "city" : "shenyang" }, { "id" : 2, "name" : "bbb", "age" : 22, "city" : "beijing" }, { "id" : 3, "name" : "ccc", "age" : 24, "city" : "shanghai" } ]

此时,如果想将以上数据生成表格
只需要调用上面的