最近，在對公司的一個老專案進行優化調整，有個使用的三方插件報表頁面，一旦查詢時間過長就會自動例外并使瀏覽器崩潰，由于這個插件只有個前人遺留的dll檔案，實在看不懂里面的代碼無從下手，既然專案前端大部分是基于EasyUI做的，想著就直接用EasyUI的DataGrid做資料報表明細展示，
由于之前很少做過B/S相關的專案，對于前端了解的不是很多，好在EasyUI框架檔案資料比較多，功能也比較齊全,上手還是比較快的，
下面開始我的第一個關于報表開發時遇到的第一個問題：EasyUI DataGrid動態列資料系結
EasyUI DataGrid動態列資料系結實作方式并不是很發雜，請求到遠程資料后,通過其中一條串列資料獲取到列欄位，然后在通過datagrid對資料進行系結
$.getJSON(url, queryParams, function (result) {
// 清空報表節點資料
$("#tbGrid").empty();
// 拼裝列頭
if (result && result.total > 0) {
var columns = new Array();
$.each(result.rows[0], function (i, field) {
var column = {};
column["title"] = i;
column["field"] = i;
columns.push(column);
});
$('#tbGrid').datagrid({
height: 780,
singleSelect: true,
rownumbers: true,
pagination: true,
columns: [
columns // 列頭系結
],
data: result.rows // 表格內容資料系結
});
//分頁處理
var pager = $('#tbGrid').datagrid('getPager');
pager.pagination({
showRefresh: false,
total: result.total,
pageList: [50, 100, 200, 500],
pageSize: queryParams.rows,
pageNumber: queryParams.page,
buttons: [{
text: '匯出',
iconCls: 'icon-redo',
handler: function () {
exportToExcel(queryParams);
}
}],
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
btnRefresh_onclick(pageNumber, pageSize);
$(this).pagination('loaded');
}
});
后臺回傳的資料物件是按datagrid要求的格式資料回傳的
public class EasyUIPageObject
{
public object rows { get; set; }
public int total { get; set; }
public object footer { get; set; } // 可選
}
相關參考：
https://www.jeasyui.com/forum/index.php?topic=2197.0
http://jeasyui.com/documentation/index.php#
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500831.html
標籤：其他
上一篇：專案剛開始需要知道的東西