最近，在對公司的一個老項目進行優(yōu)化調整。有個使用的三方插件報表頁面，一旦查詢時間過長就會自動異常并使瀏覽器崩潰，由于這個插件只有個前人遺留的dll文件，實在看不懂里面的代碼無從下手，既然項目前端大部分是基于EasyUI做的，想著就直接用EasyUI的DataGrid做數據報表明細展示。
由于之前很少做過B/S相關的項目，對于前端了解的不是很多，好在EasyUI框架文檔資料比較多，功能也比較齊全,上手還是比較快的。
下面開始我的第一個關于報表開發(fā)時遇到的第一個問題：EasyUI DataGrid動態(tài)列數據綁定
EasyUI DataGrid動態(tài)列數據綁定實現方式并不是很發(fā)雜，請求到遠程數據后,通過其中一條列表數據獲取到列字段，然后在通過datagrid對數據進行綁定

創(chuàng)新互聯建站，為您提供成都網站建設、成都網站制作、網站營銷推廣、網站開發(fā)設計，對服務成都咖啡廳設計等多個行業(yè)擁有豐富的網站建設及推廣經驗。創(chuàng)新互聯建站網站建設公司成立于2013年,提供專業(yè)網站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步，是我們永遠的責任！

$.getJSON(url, queryParams, function (result) {
    // 清空報表節(jié)點數據
    $("#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關于如何實現動態(tài)列數據綁定
路徑分享：http://chinadenli.net/article32/dsoghpc.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿建站、網站營銷、小程序開發(fā)、動態(tài)網站、網站維護、App設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯