Easyui设置动态表格,动态导出数据实例,附Dome

最近碰到一个需求，需要提供一个弹出页面选择列表页面需要显示的列，页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化。

下面直接上代码

1.设置需要显示的列columus为全局对象，用于子页面调用

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.页面初始化方法

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) {
                    console.log(data);
                    if (data) {
                        success(data);
                    } else {
                        error();
                    }
                }).fail(function () {

                });
            }
        });
        for (var i = 0; i < $(".easyui-textbox").length; i++) {
            $("#" + $('.easyui-textbox').eq(i)[0].id + "").textbox({
                inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
                    keyup: function (event) {
                        if (event.keyCode === 13) {
                            StatisticalRentReport.Select();
                        }
                    }
                })
            });
        };
    },
};
$(function() {
    StatisticalRentReport.Initialize(columns);
})

3.弹出列属性设置页面,这里会遍历所有表格数据，传递名称用于列隐藏显示匹配

//导入房屋完损状况
    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.初始化列属性选中状态

$(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.保存需要显示的列数据

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.导出数据设置需要导出的列

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;
    }

7.设置需要导出的表头属性

 if (input.Column.Contains("房屋编号"))
            {
                dt.Columns.Add("房屋编号", typeof(string));
            }
            if (input.Column.Contains("现房屋门牌"))
            {
                dt.Columns.Add("现房屋门牌", typeof(string));
            }
            if (input.Column.Contains("租赁范围"))
            {
                dt.Columns.Add("租赁范围", typeof(string));
            }
            if (input.Column.Contains("合同编号"))
            {
                dt.Columns.Add("合同编号", typeof(string));
            }
            if (input.Column.Contains("承租人"))
            {
                dt.Columns.Add("承租人", typeof(string));
            }
            if (input.Column.Contains("工作站名称"))
            {
                dt.Columns.Add("工作站名称", typeof(string));
            }
            if (input.Column.Contains("房管员"))
            {
                dt.Columns.Add("房管员", typeof(string));
            }
            if (input.Column.Contains("产权属性"))
            {
                dt.Columns.Add("产权属性", typeof(string));
            }
            if (input.Column.Contains("租金基数"))
            {
                dt.Columns.Add("租金基数", typeof(string));
            }
            if (input.Column.Contains("减免情况"))
            {
                dt.Columns.Add("减免情况", typeof(string));
            }
            if (input.Column.Contains("减免金额"))
            {
                dt.Columns.Add("减免金额", typeof(string));
            }
            if (input.Column.Contains("应收租金"))
            {
                dt.Columns.Add("应收租金", typeof(string));
            }
            if (input.Column.Contains("建筑面积"))
            {
                dt.Columns.Add("建筑面积", typeof(string));
            }
            if (input.Column.Contains("计租面积"))
            {
                dt.Columns.Add("计租面积", typeof(string));
            }
            if (input.Column.Contains("联系电话"))
            {
                dt.Columns.Add("联系电话", typeof(string));
            }
            if (input.Column.Contains("使用性质"))
            {
                dt.Columns.Add("使用性质", typeof(string));
            }
            if (input.Column.Contains("总层数"))
            {
                dt.Columns.Add("总层数", typeof(string));
            }
            if (input.Column.Contains("建成年份"))
            {
                dt.Columns.Add("建成年份", typeof(string));
            }
            if (input.Column.Contains("建筑结构"))
            {
                dt.Columns.Add("建筑结构", typeof(string));
            }
            if (input.Column.Contains("是否成套住宅"))
            {
                dt.Columns.Add("是否成套住宅", typeof(string));
            }

8.设置需要导出的列对应的导出数据

 foreach (var rentIncomeReportEx in list)
            {
                DataRow row = dt.NewRow();
                var rowlist = input.Column.Split(',');
                ; i < rowlist.Length; i++)
                {
                    ;
                    if (input.Column.Contains("房屋编号"))
                    {
                        row[j] = rentIncomeReportEx.HouseNo;
                        j++;
                    }
                    if (input.Column.Contains("现房屋门牌"))
                    {
                        row[j] = rentIncomeReportEx.HouseDoorplate;
                        j++;
                    }
                    if (input.Column.Contains("租赁范围"))
                    {
                        row[j] = rentIncomeReportEx.RentRange;
                        j++;
                    }
                    if (input.Column.Contains("合同编号"))
                    {
                        row[j] = rentIncomeReportEx.ContractNo;
                        j++;
                    }
                    if (input.Column.Contains("承租人"))
                    {
                        row[j] = rentIncomeReportEx.Name;
                        j++;
                    }
                    if (input.Column.Contains("工作站名称"))
                    {
                        row[j] = rentIncomeReportEx.HouseManageName;
                        j++;
                    }
                    if (input.Column.Contains("房管员"))
                    {
                        row[j] = rentIncomeReportEx.HousekeepName;
                        j++;
                    }
                    if (input.Column.Contains("产权属性"))
                    {
                        row[j] = rentIncomeReportEx.PropertyName;
                        j++;
                    }
                    if (input.Column.Contains("租金基数"))
                    {
                        row[j] = rentIncomeReportEx.BaseRent;
                        j++;
                    }
                    if (input.Column.Contains("减免情况"))
                    {
                        row[j] = rentIncomeReportEx.CreditCardName;
                        j++;
                    }
                    if (input.Column.Contains("减免金额"))
                    {
                        row[j] = rentIncomeReportEx.ReduceMoney;
                        j++;
                    }
                    if (input.Column.Contains("应收租金"))
                    {
                        row[j] = rentIncomeReportEx.CollectMoney;
                        j++;
                    }
                    if (input.Column.Contains("建筑面积"))
                    {
                        row[j] = rentIncomeReportEx.BuildArea;
                        j++;
                    }
                    if (input.Column.Contains("计租面积"))
                    {
                        row[j] = rentIncomeReportEx.MetRentArea;
                        j++;
                    }
                    if (input.Column.Contains("联系电话"))
                    {
                        row[j] = rentIncomeReportEx.ContactNumber;
                        j++;
                    }
                    if (input.Column.Contains("使用性质"))
                    {
                        row[j] = rentIncomeReportEx.UsePropertyName;
                        j++;
                    }
                    if (input.Column.Contains("总层数"))
                    {
                        row[j] = rentIncomeReportEx.TotalFloors;
                        j++;
                    }
                    if (input.Column.Contains("建成年份"))
                    {
                        row[j] = rentIncomeReportEx.CompletYear;
                        j++;
                    }
                    if (input.Column.Contains("建筑结构"))
                    {
                        row[j] = rentIncomeReportEx.BuildStructureName;
                        j++;
                    }
                    if (input.Column.Contains("是否成套住宅"))
                    {
                        row[j] = rentIncomeReportEx.IsTaoName;
                    }
                }
                dt.Rows.Add(row);
            }

            ds.Tables.Add(dt);

具体效果请查看Dome实例

Dome链接http://pan.baidu.com/s/1o87GEpG  提取码 i8tr