Easyui設置動態表格,動態導出數據實例,附Demo

最近開發的過程中碰到一個客戶提出的需求，一個指定的頁面導出需要提供一個彈出頁面選擇列表頁面需要顯示的列，頁面確認之后需要修改列表頁面顯示的表格,導出的數據也需要同步變化。

總結一下可以稱為一個列表數據的動態顯示和動態導出

表格應用的是Easyui datagrid插件，項目以MVC5位背景開發

下面直接上代碼

1.首先設置列表頁面需要顯示的列columus為全局對象，用於子頁面調用，這里的columns 對象在構建datagrid列表的時候決定了顯示列的相應屬性。

field  對應后台返回數據對象名稱，

title  對應列表數據顯示的名稱

width  數據列顯示的寬度

align  數據在表格中顯示方式，center  居中  left  居左， right  居右

var columns = [
    [
        { field: "HouseNo", title: "房屋編號", width: 80, align: "center" },
        { field: "HouseDoorplate", title: "現房屋門牌", width: 80, align: "center" },
        { field: "RentRange", title: "租賃范圍", width: 80, align: "center" },
        { field: "ContractNo", title: "合同編號", width: 80, align: "center" },
        { field: "Name", title: "承租人", width: 80, align: "center" },
        { field: "HouseManageName", title: "工作站名稱", width: 80, align: "center" },
        { field: "HousekeepName", title: "房管員", width: 80, align: "center" },
        { field: "PropertyName", title: "產權屬性", width: 80, align: "center" },
        { field: "BaseRent", title: "租金基數", width: 80, align: "center" },
        { field: "CreditCardName", title: "減免情況", width: 80, align: "center" },
        { field: "ReduceMoney", title: "減免金額", width: 80, align: "center" },
        { field: "CollectMoney", title: "應收租金", width: 80, align: "center" },
        { field: "BuildArea", title: "建築面積", width: 80, align: "center" },
        { field: "MetRentArea", title: "計租面積", width: 80, align: "center" },
        { field: "ContactNumber", title: "聯系電話", width: 80, align: "center" },
        { field: "UsePropertyName", title: "使用性質", width: 80, align: "center" },
        { field: "TotalFloors", title: "總層數", width: 80, align: "center" },
        { field: "CompletYear", title: "建成年份", width: 80, align: "center" },
        { field: "BuildStructureName", title: "建築結構", width: 80, align: "center" },
        { field: "IsTaoName", title: "是否成套住宅", width: 80, align: "center" }
    ]
];

 

2.datagrid表格頁面初始化,里面的每一個屬性的詳細意義就不一一介紹了，需要了解可以查找easyui  datagrid表格相關文檔

主要調用了loader方法回調success，通過Ajax請求后台數據，返回解析成對應datagrid所需要的格式數據在綁定到表格上面。

var StatisticalRentReport = {
Initialize: function (columns) {
        $("#StatisticalRentReportDataGrid").datagrid({
            columns: columns,
            checkOnSelect: true,
            height: '500',
            idField: "id",
            striped: true,
            singleSelect: true,
            fitColumns: false,
            fit: false,
            loadMsg: false,
            nowrap: false,
            rownumbers: true, //行號
            pagination: true, //分頁控件
            pageSize: 10,
            pageList: [10, 50, 100, 500, 1000, 2000, 10000],
            showFooter: true,
            onLoadSuccess: function (data) {
                $(this).datagrid('doCellTip', { 'max-width': '400px', 'delay': 500 });
                $(this).datagrid("clearSelections").datagrid("clearChecked");
            },
            loader: function (param, success, error) {
                $.ajax({
                    type: "POST",
                    url: "/Home/GetData",
                    contentType: "application/json",
                    data: null
                }).done(function (data) {
                    if (data) {
                        success(data);
                    } else {
                        error();
                    }
                }).fail(function () {

                });
            }
        });
    },
};
$(function() {
    StatisticalRentReport.Initialize(columns);
})

 

3.彈出列屬性設置頁面,這里會遍歷所有表格數據，傳遞名稱用於列隱藏顯示匹配，通過遍歷columns對應，然后用拼字符串的形式傳遞到字段設置字段屬性頁面

這里的Column參數在列熟悉設置頁面初始化顯示列熟悉的時候回應用到！

//導入房屋完損狀況
    ColumnProperties: function () {
        var html = "";
        for (var i = 0; i < columns[0].length; i++) {
            if (columns[0][i].hidden !== true) {
                html += columns[0][i].title + ",";
            }
        }
        dialog = ezg.modalDialog({
            width: 650,
            height: 370,
            title: '房屋查詢報表列屬性設置',
            url: '/Report/ColumnProperties?Column=' + html
        });
    },

 

4.初始化列屬性選中狀態，獲取父頁面傳遞過來的Column字符串，然后獲取彈出頁面需要選中的checkbox，設置當前顯示的列為選中狀態，這里主要的作用是在於可能之前選擇過一次需要顯示的列，如果再次設置需要顯示的列，如果不初始化這些列，就會導致操作繁瑣的一個過程。topevery.getQuery這個方法是在base.js里面封裝的一個方法，主要是獲取Url傳遞的參數對象。

$(function () {
    var columnId = topevery.getQuery('Column');
    var columns1 =  columnId.split(',');
    var obj = $("input[name='column']");
    for (var i = 0; i < obj.length; i++) {
        for (var j = 0; j < columns1.length; j++) {
            if (obj[i].value === columns1[j]) {
                $(obj[i]).attr('checked', 'checked');///初始化顯示列表已經顯示的列數據為選擇
            }
        }
    }
})

 

5.保存需要顯示的列數據，設置未勾選的列的hidden 屬性為false，然后通過parent調用父頁面的構建表格函數重新構建表格。這里的代碼思路請查看代碼注釋。在這里有一個重要的初始化方法，需要把所有列的hidden設置為false，然后在把需要隱藏的列熟悉設置為true，不然會造成第一次設置為隱藏，在第二次及以后設置中改列的hidden屬性一直為true。parent用於獲取父頁面的元素屬性。

var ColumnProperties= {
    Save: function () {
        var obj = $("input[name='column']:checked");
        var columns = parent.columns[0].concat();//深copy一個對象用於遍歷保存需要隱藏的列數據
        var columns1 = parent.columns[0].concat();//深copy一個對象用於遍歷保存需要顯示的列數據
        for (var i = 0; i < obj.length; i++) {
            for (var j = 0; j < columns.length; j++) {
                if (obj[i].value === columns[j].title) {
                    columns.splice(j, 1);//刪除需要顯示的列數據
                }
            }
        }
        for (var k = 0; k < columns1.length; k++) {
            columns1[k].hidden = false;//初始化所有列數據為顯示,如果不初始化,隱藏掉的列就無法再顯示了
        }
        for (var f = 0; f < columns1.length; f++) {
            for (var h = 0; h < columns.length; h++) {
                if (columns1[f].title === columns[h].title) {
                    columns1[f].hidden = true;//設置需要隱藏列的hidden屬性為true
                }
            }
        }
        var object = new Array();
        object[0] = columns1;
        parent.StatisticalRentReport.Initialize(object);//重新構造datagrid表格
        parent.dialog.dialog('close');//關閉彈出框口
    }
}

 

6.導出數據設置需要導出的列，通過columns對應的hidden屬性，如果為true則是不需要導出的列，反之則是需要導出的列，Column參數主要的作用在后台需要設置到處哪些列的時候體現出來。

RentExp: function () {
        var html = "";
        for (var i = 0; i < columns[0].length; i++) {
            if (columns[0][i].hidden !== true) {
                html += columns[0][i].title + ",";
            }
        }
        window.location.href = "/Report/StatisticalRentReportExpAsync?Column=" + html;
    }

 

 

總結：大致的功能效果實現的差不多了，但是存在非常頻繁的for循環，導致整個的代碼可讀性可能差了那么一點。如果有更好的建議，歡迎大家提出，進行修改！

這里主要提供了這樣的一個思路，其實在很多的code的時候，很多的前輩都教導我們，拿到需求先不要急着去寫代碼，認真的讀幾遍需求，反復的思考在去動手，往往都能夠快速的解決問題。

其實關於這篇文章有個很慘的事情，這已經是修改了第三次了，之前都因為文字介紹太少沒有審核通過，當時很氣的一點是明明是技術型的文章，如果針對的有需要幫助的人，應該能夠很輕松的就能夠理解，后面想了想也還是沒有想通！what？

具體效果請查看Demo實例

Dome鏈接http://pan.baidu.com/s/1o87GEpG  提取碼 i8tr