EasyUI DataGrid 动态列数据绑定

时间:2022-09-29 壮哈苗人气:0

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