EasyUI怎么使用DataGrid实现动态列数据绑定

这篇文章主要讲解了“EasyUI怎么使用DataGrid实现动态列数据绑定”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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实现动态列数据绑定这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！