最近碰到一个需求，需要提供一个弹出页面选择列表页面需要显示的列，页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化。
下面直接上代码
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