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; } // 可选
 }

到此这篇关于EasyUI使用DataGrid实现动态列数据绑定的文章就介绍到这了,更多相关EasyUI DataGrid 动态列数据绑定内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)！