EasyUI easyui-datagrid分頁功能實現
阿新 • • 發佈：2019-02-03
$('#dg_query').datagrid({ toolbar:toolbar, loadMsg:'資料載入中....', columns:[[ {field:'ckSelect',title:'選擇',width:50,checkbox:true}, {field:'WBSH',title:'發貨方',width:120,align:'left', sortable:true}, {field:'APPLY_TIME',title:'申請時間',width:70,align:'left', sortable:true}, {field:'WBWAYBILLID',title:'確認號',width:120,align:'left', sortable:true}, {field:'WBAPPSTATE',title:'WBAPPSTATE',hidden:true}, {field:'APL_STAT',title:'申請狀態',width:60,align:'left', sortable:true}, {field:'WBCHKSTATE',title:'WBCHKSTATE',hidden:true}, {field:'CHK_STAT',title:'確認狀態',width:60,align:'left', sortable:true, styler:cellStyler}, {field:'WBUPLSTATE',title:'WBUPLSTATE',hidden:true}, {field:'UPL_STAT',title:'上傳標記',width:60,align:'left', sortable:true}, {field:'WBCHKUPLST',title:'WBCHKUPLST',hidden:true}, {field:'UPLCHK_STAT',title:'保函<br/>稽核狀態',width:60,align:'left', sortable:true, styler:cellStyler}, {field:'HAVE_DAY',title:'有效期<br/>天數還有',width:70,align:'left', sortable:true}, {field:'BEG_TIME',title:'有效期<br/>起始時間',width:70,align:'left', sortable:true}, {field:'END_TIME',title:'有效期<br/>結束時間',width:70,align:'left', sortable:true}, {field:'WBLDNM',title:'起運港口',width:70,align:'left', sortable:true}, {field:'POD_PORT',title:'卸貨港口',width:120,align:'left', sortable:true}, {field:'WBCONTRACT',title:'合約號',width:70,align:'left', sortable:true}, {field:'WBIVLD',title:'WBIVLD',hidden:true}, {field:'DEL_STAT',title:'是否刪除',width:70,align:'left', sortable:true}, {field:'WBKEY',title:'WBKEY',hidden:true} ]], border: true, nowrap: false, fit: true, fitColumns: false, //striped: true, singleSelect: true, remoteSort: false, rownumbers: true, pagination: true, pageSize: 10, pageList: [10,20,50,100,200], loadFilter: pagerFilter, rowStyler: function(index, row) { if ($.trim(row.WBIVLD) != '') { return 'color:#ff0000'; } else if ($.trim(row.WBCHKSTATE) == 'C' && $.trim(row.WBCHKUPLST) == 'C') { return 'background-color:#c4e1ff'; } } }); function cellStyler(value, row, index) { if ($.trim(value) == '已拒絕') { return 'color:#ff0000'; } } //分頁功能 function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { if(data.rows) data.originalRows = (data.rows); else if(data.data && data.data.rows) data.originalRows = (data.data.rows); else data.originalRows = []; } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; }