EasyUI DataGrid关于如何实现动态列数据绑定

最近，在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面，一旦查询时间过长就会自动异常并使浏览器崩溃，由于这个插件只有个前人遗留的dll文件，实在看不懂里面的代码无从下手，既然项目前端大部分是基于EasyUI做的，想着就直接用EasyUI的DataGrid做数据报表明细展示。
由于之前很少做过B/S相关的项目，对于前端了解的不是很多，好在EasyUI框架文档资料比较多，功能也比较齐全,上手还是比较快的。
下面开始我的第一个关于报表开发时遇到的第一个问题：EasyUI DataGrid动态列数据绑定
EasyUI DataGrid动态列数据绑定实现方式并不是很发杂，请求到远程数据后,通过其中一条列表数据获取到列字段，然后在通过datagrid对数据进行绑定

创新互联建站，为您提供成都网站建设、成都网站制作、网站营销推广、网站开发设计，对服务成都咖啡厅设计等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

$.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#

本文标题：EasyUI DataGrid关于如何实现动态列数据绑定
标题路径：http://mswzjz.cn/article/dsoghpc.html