EasyUI怎么使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定

這篇文章主要講解了“EasyUI怎么使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“EasyUI怎么使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定”吧！

EasyUI DataGrid動(dòng)態(tài)列數(shù)據(jù)綁定實(shí)現(xiàn)方式并不是很發(fā)雜，請(qǐng)求到遠(yuǎn)程數(shù)據(jù)后,通過其中一條列表數(shù)據(jù)獲取到列字段，然后在通過datagrid對(duì)數(shù)據(jù)進(jìn)行綁定

$.getJSON(url, queryParams, function (result) {
    // 清空?qǐng)?bào)表節(jié)點(diǎn)數(shù)據(jù)
    $("#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  // 表格內(nèi)容數(shù)據(jù)綁定
        });

        //分頁(yè)處理
        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: '導(dǎo)出',
                iconCls: 'icon-redo',
                handler: function () {
                    exportToExcel(queryParams);
                }
            }],
            onSelectPage: function (pageNumber, pageSize) {
                $(this).pagination('loading');
                btnRefresh_onclick(pageNumber, pageSize);
                $(this).pagination('loaded');
            }
        });

后臺(tái)返回的數(shù)據(jù)對(duì)象是按datagrid要求的格式數(shù)據(jù)返回的

 public class EasyUIPageObject
 {
     public object rows { get; set; }
     public int total { get; set; }
     public object footer { get; set; } // 可選
 }

感謝各位的閱讀，以上就是“EasyUI怎么使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)EasyUI怎么使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！