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 }

其中的参数:

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)

如果数据没达到表格分页最少显示行数 , 会自动取消分页 ; 数据改变之后 , 如果数量达到分页要求 , 会自动分页