EasyUI的DataGrid 打印导出
EasyUI的DataGrid 打印导出
一直在Winform和WPF的项目，偶尔接触Web都是网上下个模板修修改改就成了，学习的不太深入。
今日遇到一个打印导出datagrid的问题，做桌面项目的打印导出通常我都是直接将数据源拿过来放到我的打印导出模块直接就出来了，但是在web上没有积累，特别是用了EasyUI的DataGrid,一时不知道如何是好。
遂度娘一翻找到如下解决方案：
1.打印部分
新增print.js
// strPrintName 打印任务名
// printDatagrid 要打印的datagrid
function CreateFormPage(strPrintName, printDatagrid) {
var tableString = '<table cellspacing="0" class="pb">';
var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
var columns = printDatagrid.datagrid("options").columns; // 得到columns对象
var nameList = ''; // 载入title
if (typeof columns != 'undefined' && columns != '') {
$(columns).each(function (index) {
tableString += '\n<tr>';
if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
for (var i = 0; i < frozenColumns[index].length; ++i) {
if (!frozenColumns[index][i].hidden) {
tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
}
if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
}
if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}';
}
tableString += '>' + frozenColumns[0][i].title + '</th>';
}
}
}
for (var i = 0; i < columns[index].length; ++i) {
if (!columns[index][i].hidden) {
tableString += '\n<th width="' + columns[index][i].width + '"';
if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
tableString += ' rowspan="' + columns[index][i].rowspan + '"';
}
if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
tableString += ' colspan="' + columns[index][i].colspan + '"';
}
if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}';
}
tableString += '>' + columns[index][i].title + '</th>';
}
}
tableString += '\n</tr>';
});
}
// 载入内容
var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
var nl = eval('([' + nameList.substring(1) + '])');
for (var i = 0; i < rows.length; ++i) {
tableString += '\n<tr>';
$(nl).each(function (j) {
var e = nl[j].f.lastIndexOf('_0'); tableString += '\n<td';
if (nl[j].a != 'undefined' && nl[j].a != '') {
tableString += ' style="text-align:' + nl[j].a + ';"';
}
tableString += '>';
if (e + 2 == nl[j].f.length) {
tableString += rows[i][nl[j].f.substring(0, e)];
}
else
tableString += rows[i][nl[j].f];
tableString += '</td>';
});
tableString += '\n</tr>';
}
tableString += '\n</table>';
window.showModalDialog("print.htm", tableString,
"location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;");
}
新增print.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据打印</title> <style type="text/css">
body{background:white;margin:0px;padding:0px;font-size:13px;text-align:left;}
.pb{font-size:13px;border-collapse:collapse;}
.pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.pb td{border:1px solid #333333;padding:2px;}
</style>
</head>
<body>
<script type="text/javascript">
document.write(window.dialogArguments);
window.print();
</script>
</body>
</html>
页面引用print.js并调用
CreateFormPage("datagrid",$("#dg"));
2.导出部分
新增export.js
function ChangeToTable(printDatagrid) {
var tableString = '<table cellspacing="0" class="pb">';
var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
var columns = printDatagrid.datagrid("options").columns; // 得到columns对象
var nameList = new Array();
// 载入title
if (typeof columns != 'undefined' && columns != '') {
$(columns).each(function (index) {
tableString += '\n<tr>';
if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
for (var i = 0; i < frozenColumns[index].length; ++i) {
if (!frozenColumns[index][i].hidden) {
tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
}
if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
}
if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
nameList.push(frozenColumns[index][i]);
}
tableString += '>' + frozenColumns[0][i].title + '</th>';
}
}
}
for (var i = 0; i < columns[index].length; ++i) {
if (!columns[index][i].hidden) {
tableString += '\n<th width="' + columns[index][i].width + '"';
if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
tableString += ' rowspan="' + columns[index][i].rowspan + '"';
}
if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
tableString += ' colspan="' + columns[index][i].colspan + '"';
}
if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
nameList.push(columns[index][i]);
}
tableString += '>' + columns[index][i].title + '</th>';
}
}
tableString += '\n</tr>';
});
}
// 载入内容
var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
for (var i = 0; i < rows.length; ++i) {
tableString += '\n<tr>';
for (var j = 0; j < nameList.length; ++j) {
var e = nameList[j].field.lastIndexOf('_0');
tableString += '\n<td';
if (nameList[j].align != 'undefined' && nameList[j].align != '') {
tableString += ' style="text-align:' + nameList[j].align + ';"';
}
tableString += '>';
if (e + 2 == nameList[j].field.length) {
tableString += rows[i][nameList[j].field.substring(0, e)];
}
else
tableString += rows[i][nameList[j].field];
tableString += '</td>';
}
tableString += '\n</tr>';
}
tableString += '\n</table>';
return tableString;
}
function Export(strXlsName, exportGrid) {
var f = $('<form action="export.aspx" method="post" id="fm1"></form>');
var i = $('<input type="hidden" id="txtContent" name="txtContent" />');
var l = $('<input type="hidden" id="txtName" name="txtName" />');
i.val(ChangeToTable(exportGrid));
i.appendTo(f);
l.val(strXlsName);
l.appendTo(f);
f.appendTo(document.body).submit();
try{
document.body.removeChild(f);}catch(e){}
}
新增export.aspx后台
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.Buffer = true;
Response.Charset = "utf-8";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.AppendHeader("content-disposition", "attachment;filename=\"" + HttpUtility.HtmlEncode(Request["txtName"] ?? DateTime.Now.ToString("yyyyMMdd")) + ".xls\"");
Response.ContentType = "Application/ms-excel";
Response.Write("<html>\n<head>\n");
Response.Write("<style type=\"text/css\">\n.pb{font-size:13px;border-collapse:collapse;} " +
"\n.pb th{font-weight:bold;text-align:center;border:0.5pt solid windowtext;padding:2px;} " +
"\n.pb td{border:0.5pt solid windowtext;padding:2px;}\n</style>\n</head>\n");
Response.Write("<body>\n" + Request["txtContent"] + "\n</body>\n</html>");
Response.Flush();
Response.End();
}
export.aspx前台仅保留
页面引用export.js并调用
Export('outputexcel', $('#dg'));
EasyUI的DataGrid 打印导出的更多相关文章
- easyui的datagrid打印(转)
在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
- 把旧系统迁移到.Net Core 2.0 日记（8) - EASYUI datagrid+ Dapper+ 导出Excel
迁移也没太大变化,有一个, 之前的Request.QueryString 是返回NameValueCollection, 现在则是返回整个字符串. 你要改成Request.Query[“key”] 直 ...
- EasyUI 如何结合JS导出Excel文件
出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...
- easyUI 中datagrid 返回列隐藏方法
easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
随机推荐
- 关于 VS 无法转到定义和无法转到使用的问题
今天提交完代码以后突然发现 咦 怎么F12 .点击右键的方法都不能转到定义了 转到引用 也提示 没有发现 重启VS 还是不行 .去找王晓 他也不清楚(其实我知道 他应该也不清楚 ...
- Oracle存储过程总结
1.存储过程结构 1.1 第一个存储过程 create or replace procedure proc1( para1 varchar2, para2 out varchar2, para3 in ...
- 夺命雷公狗ThinkPHP项目之----企业网站22之网站前台中间层（解决代码冗余）
我们如果这样写代码虽然可以实现头部二级分类的显示,但是如果再别的控制器下那么会出现显示不了.. 如果再加多一段一样的代码也可以实现出一样的效果: 但是这样会导致代码冗余现象,所以我们为了解决这个问题, ...
- LDA-math-神奇的Gamma函数
http://cos.name/2013/01/lda-math-gamma-function/ 1. 神奇的Gamma函数1.1 Gamma 函数诞生记学高等数学的时候,我们都学习过如下一个长相有点 ...
- python入门语法总结 zz
http://renjie120.iteye.com/blog/680126 1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计 ...
- Mysql数据库读写分离配置
环境模拟 实现读写分离 减轻数据库的负荷 主服务器 master 10.0.0.12 从服务器 slave 10.0.0.66 配置主服务器: 在10.0.0.12服务器操作 创建数据 ...
- C++头文件为什么要加#ifndef #define #endif
#ifndef 在头文件中的作用 在一个大的软件工程里面,可能会有多个文件同时包含一个头文件,当这些文件编译链接成一个可执行文件时 ,就会出现大量“重定义”的错误.在头文件中实用#ifndef #de ...
- OpenStack 密码注入
现状 实例可以创建,可以使用vnc,可以ssh,但是就是密码要使用默认tima123,要修改密码必须进入虚拟机.实际场景中如果用户将密码修改后忘记,需要重置密码则我们作为管理员也没有办法.这在实际需求 ...
- ==，equal，hasCode(),identifyHasCode()浅析
在java中如果我们要比较两个对象之间的关系的话有可能会用到下面的几种方法:==,equal,hasCode(),identifyHasCode(). ==用来比较对象本身是不是相同的. public ...
- 苹果系统直接读写 ntfs 磁盘
苹果系统对 ntfs 能读,但不能写. 方案1:修改 fstab 法 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 读写支持.在使用本教学文章之前,请先确定你没有安 ...