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

時間 2019-12-08

標籤 easyui 設置動態表格導出數據實例 demo 简体版

原文原文鏈接

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

總結一下能夠稱爲一個列表數據的動態顯示和動態導出ajax

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

下面直接上代碼app

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表格相關文檔ui

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

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對應，而後用拼字符串的形式傳遞到字段設置字段屬性頁面url

這裏的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傳遞的參數對象。code

$(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