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
