最近，在對公司的一個老項(xiàng)目進(jìn)行優(yōu)化調(diào)整。有個使用的三方插件報表頁面，一旦查詢時間過長就會自動異常并使瀏覽器崩潰，由于這個插件只有個前人遺留的dll文件，實(shí)在看不懂里面的代碼無從下手，既然項(xiàng)目前端大部分是基于EasyUI做的，想著就直接用EasyUI的DataGrid做數(shù)據(jù)報表明細(xì)展示。

由于之前很少做過B/S相關(guān)的項(xiàng)目，對于前端了解的不是很多，好在EasyUI框架文檔資料比較多，功能也比較齊全,上手還是比較快的。

下面開始我的第一個關(guān)于報表開發(fā)時遇到的第一個問題：EasyUI DataGrid動態(tài)列數(shù)據(jù)綁定

EasyUI DataGrid動態(tài)列數(shù)據(jù)綁定實(shí)現(xiàn)方式并不是很發(fā)雜，請求到遠(yuǎn)程數(shù)據(jù)后,通過其中一條列表數(shù)據(jù)獲取到列字段，然后在通過datagrid對數(shù)據(jù)進(jìn)行綁定

$.getJSON(url, queryParams, function (result) {
? ? // 清空報表節(jié)點(diǎn)數(shù)據(jù)
? ? $("#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 ?// 表格內(nèi)容數(shù)據(jù)綁定
? ? ? ? });

? ? ? ? //分頁處理
? ? ? ? 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: '導(dǎo)出',
? ? ? ? ? ? ? ? iconCls: 'icon-redo',
? ? ? ? ? ? ? ? handler: function () {
? ? ? ? ? ? ? ? ? ? exportToExcel(queryParams);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }],
? ? ? ? ? ? onSelectPage: function (pageNumber, pageSize) {
? ? ? ? ? ? ? ? $(this).pagination('loading');
? ? ? ? ? ? ? ? btnRefresh_onclick(pageNumber, pageSize);
? ? ? ? ? ? ? ? $(this).pagination('loaded');
? ? ? ? ? ? }
? ? ? ? });

后臺返回的數(shù)據(jù)對象是按datagrid要求的格式數(shù)據(jù)返回的

?public class EasyUIPageObject
?{
? ? ?public object rows { get; set; }
? ? ?public int total { get; set; }
? ? ?public object footer { get; set; } // 可選
?}

到此這篇關(guān)于EasyUI使用DataGrid實(shí)現(xiàn)動態(tài)列數(shù)據(jù)綁定的文章就介紹到這了,更多相關(guān)EasyUI DataGrid 動態(tài)列數(shù)據(jù)綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: