easyui datagrid 动态生成列（报表开发的那些日子：关于EasyUI DataGrid动态列数据绑定）

时间2025-05-05 03:06:18分类IT科技浏览4554

导读：最近，在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面，一旦查询时间过长就会自动异常并使浏览器崩溃，由于这个插件只有个前人遗留的dll文件，实在看不懂里面的代码无从下手，既然项目前端大部分是基于EasyUI做的，想着就直接用EasyUI的DataGrid做数据报表明细展示。...

最近，在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面，一旦查询时间过长就会自动异常并使浏览器崩溃，由于这个插件只有个前人遗留的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; } // 可选 }