前端用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)

如果資料沒達到表格分頁最少顯示行數 , 會自動取消分頁 ; 資料改變之後 , 如果數量達到分頁要求 , 會自動分頁