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
Easyui设置动态表格,动态导出数据实例,附Dome的更多相关文章
- Easyui设置动态表格,动态导出数据实例,附Demo
最近开发的过程中碰到一个客户提出的需求,一个指定的页面导出需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 总结一下可以称为一个列表数据 ...
- jQuery的下面是动态表格动态表单中的HTML代码
动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...
- Java实现PDF和Excel生成和数据动态插入以及导出
一.序言 Excel.PDF的导出.导入是我们工作中经常遇到的一个问题,刚好今天公司业务遇到了这个问题,顺便记个笔记以防下次遇到相同的问题而束手无策. 公司有这么两个需求: 需求一.给了一个表单,让把 ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
- 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- easyui datagrid 可过滤行的数据表格 导出
//过滤栏表格导出数据 /* xukf * id datagrid id * url Action 路 ...
- 数据的动态合并和导出至EXCEL
最近一段时间都在处理数据的动态合并和导出EXCEL的问题,写个demo记录下,希望和我碰到同样问题的博友可以顺利解决:后面会提供demo下载链接. (VS2012,ASP.NET) 一.主要解决以下问 ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
随机推荐
- 数据库之Oracle(一)
前段时间项目中需要做数据管理和迁移的工作,于是又重新拾起了数据库,在javaEE阶段,我们对于数据库的使用仅限于DML(insert,update,delete,select).数据库的使用也比较狭隘 ...
- 让Cocos2dx中的TestCPP中的Box2dTest运行起来
一般而言,如果你导入TestCPP到VS2012中去后,会编译十几分钟才会出现窗口界面,这是包含Cocos2dx所有功能的一个demo,功能非常齐全强大,里面有两个关于Box2d的测试案例,一个是Bo ...
- HashSet实现原理
/* HashSet的实现原理: 往HashSet添加元素的时候,HashSet会先调用元素的hashCode方法得到元素的哈希值 , 然后通过元素 的哈希值经过移位等运算,就可以算出该元素在哈希表中 ...
- ionic创建项目遇到的各种问题
前提:执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank. 提示已经有同名项目,是否覆盖.这里创建的是一个blank(空) 的ionic项目.还要两种是 ...
- UNIX 系统概述
UNIX体系结构(UNIX Architecture) 调用内核的接口叫做系统调用(system call,图1.1中的阴影部分),普通函数库是建立在系统调用接口的基础之上.应用(applicatio ...
- php框架之我见：php开发到底需不要用框架？
本来就很好,结果无论软件CMS还是各种框架,都自己制造一套自己的规则! 关键还不通用! 我学PHP语法 语义累了半年好不容易熟悉,结果学个框架又学半年,然后框架升级或者去学其他框架,之前学的又等于没用 ...
- 工具类总结---（六）---之http及https请求
下面使用的是HttpURLConnection进行的网络链接,并对https进行了忽略证书. 在这个utils里面,也使用到前面几个utils,比如下载文件的方法,就使用到了Fileutils pac ...
- mysql varchar类型转换int类型找出最大值
(1) 不严谨的,最简单的 select MAX(字段名 + 0) from 表名; (2) 使用函数实现 select MAX(cast(字段名 as SIGNED INTEGER)) from 表 ...
- 使用r.js优化静态资源
r.js主要功能:优化项目的静态资源.可以简化压缩代码,减少体积.指定模块将多个组件合并为一个文件,减少HTTP请求数量.具体使用步骤如下: 先把 r.js 文件放到项目根目录,再于项目根目录内新建一 ...
- B计划
简介:从一个初学者的角度来讲,要从六个方面来对计算机来做一个大约的了解: 计算机的组成: 电脑配置: 操作系统: CDEF盘: 正确的开关机(主要是关机): 常用软件: 1. 电脑由哪几部分组成? ...