ASP.NET MVC5+EF6+EasyUI 后台管理系统(92)-打印EasyUI 的datagrid表格

前言

应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容

打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制成可以打印的html格式

一、建立一个普通的例子

我们使用官方下载的demo下的datagrid basic.html代码就好

引入Jqgrid打印插件,并增加一个按钮来触发打印事件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script src="jquery.jqprint-0.3.js"></script>
</head>
<body><h2>Basic DataGrid</h2><p>The DataGrid is created from markup, no JavaScript code needed.</p><div id="modalwindow" class="easyui-window" style="width:800px; height:400px;" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div><div style="margin:20px 0;"><a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:80px">Print</a></div><table id="List" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100">Product</th><th data-options="field:'listprice',width:80,align:'right'">List Price</th><th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:250">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table><script type="text/javascript">$(function () {//由于本地无法直接读取json文件,所以将数据提取出来赋值var obj = {"total": 28, "rows": [{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }]};
//加载数据$(
'#List').datagrid('loadData', obj);});</script> </body> </html>

 

 

二、将datagrid数据分解成HTML Table表格

function CreateFormPage(printDatagrid) {var tableString = '<div class="mvctool bgb"><a οnclick="$(\'.dg-pb\').jqprint();" class="btn btn-default"><span class="fa fa-print"></span>&nbsp;打印</a></div><table cellspacing="0" class="dg-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) {if (rows[i][nl[j].f.substring(0, e)] != null) {tableString += rows[i][nl[j].f.substring(0, e)];} else {tableString += "";}}else { if (rows[i][nl[j].f] != null) {tableString += rows[i][nl[j].f];} else {tableString += "";}}tableString += '</td>';});tableString += '\n</tr>';}tableString += '\n</table>';return tableString;
}

代码看起来有点复杂,但是不难看懂,提取datagrid的title和历遍数据得重新写入一个新的table

三、添加打印事件

     $("#btnPrint").click(function () {var tablestr = CreateFormPage($("#List"));$("#modalwindow").html(tablestr);$("#modalwindow").window({ title: "打印", width:500, height: 400, iconCls: 'fa fa-plus' }).window('open');});

四、预览结果

总结:

不是很美观,那么加入一段CSS吧

/*datagrid print*/
.dg-pb{font-size:13px;border-collapse:collapse;}
.dg-pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.dg-pb td{border:1px solid #333333;padding:2px;}

 

再次在预览的结果点击打印调出打印机

 本节完整代码下载

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script src="jquery.jqprint-0.3.js"></script>
</head><body><style>/*datagrid print*/
.dg-pb{font-size:13px;border-collapse:collapse;}
.dg-pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.dg-pb td{border:1px solid #333333;padding:2px;}</style><h2>Basic DataGrid</h2><p>The DataGrid is created from markup, no JavaScript code needed.</p><div id="modalwindow" class="easyui-window" style="width:800px; height:400px;" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div><div style="margin:20px 0;"><a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:80px">Print</a></div><table id="List" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100">Product</th><th data-options="field:'listprice',width:80,align:'right'">List Price</th><th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:250">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table><script type="text/javascript">$(function () {var obj = {"total": 28, "rows": [{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }]};$('#List').datagrid('loadData', obj);$("#btnPrint").click(function () {var tablestr = CreateFormPage($("#List"));$("#modalwindow").html(tablestr);$("#modalwindow").window({ title: "打印", width:700, height: 400, iconCls: 'fa fa-plus' }).window('open');});});function CreateFormPage(printDatagrid) {var tableString = '<div class="mvctool bgb"> <a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:\'icon-print\'" style="width:80px" οnclick="$(\'.dg-pb\').jqprint();">打印</a></div><table cellspacing="0" class="dg-pb">';var frozenColumns = printDatagrid.datagrid("options").frozenColumns;  // 得到frozenColumns对象var columns = printDatagrid.datagrid("options").columns;    // 得到columns对象var nameList = '';// 载入titleif (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) {if (rows[i][nl[j].f.substring(0, e)] != null) {tableString += rows[i][nl[j].f.substring(0, e)];} else {tableString += "";}}else {if (rows[i][nl[j].f] != null) {tableString += rows[i][nl[j].f];} else {tableString += "";}}tableString += '</td>';});tableString += '\n</tr>';}tableString += '\n</table>';return tableString;}</script>
</body>
</html>
View Code

 

转载于:https://www.cnblogs.com/ymnets/p/9574131.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

速读训练软件_记忆宫殿记忆力训练教程-第八天

第四部分 右脑开发及训练前面我们已经知道了右脑的记忆能力是左脑的100万倍&#xff0c;这可不是个小数字&#xff0c;如果我们能利用右脑来处理眼睛所收集到的信息&#xff0c;我们的记忆能力就会达到每分钟数万字的超级速度右脑不同于左脑的四种能力为&#xff1a;1、共振能力…

浅谈mysql的子查询

2019独角兽企业重金招聘Python工程师标准>>> mysql的子查询的优化一直不是很友好&#xff0c;一直有受业界批评比较多,也是我在sql优化中遇到过最多的问题之一&#xff0c;mysql在处理子查询的时候&#xff0c;会将子查询改写,通常情况下&#xff0c;我们希望由内到…

选择符合语义的html标签,最容易犯的HTML标签错误写法

我们最好开始注意了,因为HTML Police会走遍你的代码然后挑出你所有没有语义的标签,这份列表包含了10个最经常犯得HTML标签错误,记下他们,能够让我们避免犯此常见错误,让我们的HTML标签符合语义,和标准的要求.罪行1:把块级元素放入了行内元素内HTML 元素的表现方式不外乎就两种:…

Linux进程编程(PS: exec族函数、system、popen函数)

目录1.进程相关概念程序和进程查看系统中的进程ps指令top指令进程标识符 使用getpid()获取父进程&#xff0c;子进程2.创建进程fork进程创建发生了什么——C程序的存储空间如何分配3.创建进程vfork(区别fork)4.进程退出正常退出异常退出5.父进程等待子进程退出父进程收集子进程…

简练软考知识点整理-控制成本过程

控制成本是监督项目状态&#xff0c;以更新项目成本&#xff0c;管理成本基准变更的过程。本过程的主要作用是&#xff0c;发现实际与计划的差异&#xff0c;以便采取纠正措施&#xff0c;降低风险。要更新预算&#xff0c;就需要了解截至目前的实际成本。只有经过实施整体变更…

求一列数据中的波峰_PowerQuery:横向/纵向追加数据

上一篇文章都是在原表数据基础上的分分合合&#xff0c;但做数据分析的时候还经常需要在原有数据的基础上增加一些辅助数据&#xff0c;比如加入新列、新行&#xff0c;或者从其他表中添加进来更多维度的数据&#xff0c;这些就是数据丰富的过程。01添加列Power Query中添加列有…

HTML对字体的操作详解

摘自&#xff1a;HTML对字体的所有操作详解&#xff08;经典&#xff09; 作者&#xff1a;HeroKern 发布时间&#xff1a; 2016-01-31 21:15:31 网址&#xff1a;https://blog.csdn.net/qq_21792169/article/details/50615919/?utm_termhtml%E6%A0%87%E8%AE%B0%E5%AD%97%E4%B…

数学学习笔记-三角函数

1.圆的一周的弧度数为2π&#xff0c;360角2π弧度&#xff0c;1为π/180弧度 2.如下图&#xff0c;在一个直角三角形中 角A的对边为正对着的那个边a角A的邻边为另外一条直角边b角A的斜边为斜边c其中 正弦sin(A)对边/斜边余弦cos(A)邻边/斜边正切tan(A)对边/邻边正割csc(A)1/si…

云计算呼叫中心_SaaS云呼叫中心系统只用于销售或客服?

随着时代的发展&#xff0c;公司企业不一定有规模了才需要呼叫中心系统。SaaS云部署方式呼叫中心系统的出现&#xff0c;已经能够满足所有公司的需要&#xff0c;成本低、功能完善、效率高。公司电话管理系统通常大家的理解是&#xff0c;呼叫中心只是应用于针对营销部门或是客…

mvc4 html.pager,MVC分页之MvcPager使用详解

最近刚刚接触MVC不久&#xff0c;因项目中要用到分页&#xff0c;网上找了下资料&#xff0c;最后采用了MvcPager(http://www.webdiyer.com/),支持同步和Ajax异步分页。废话不多说了直接上代码。一.MvcPager异步 ViewModel:public class Article{[Display(Name "信息编号…

原生希望原生JavaScript开篇

本篇文章个人在深圳游玩的时候突然想到的...最近就有想写几篇关于原生希望的文章&#xff0c;所以回家到之后就奋笔疾书的写出来发布了 一直对前端技巧很有兴致&#xff0c;就心生了写一个专栏的动机&#xff0c;然后就申请了原生JavaScript这个专栏&#xff0c;旨在与大家同共…

POJ 1836 Alignment

有一排人&#xff0c;身高可能不同&#xff0c;现在有一个理想状态是这排的每个人向左或向右看没有被挡住视野(当遇到等高或更高的人时会被挡住)&#xff0c;现在问最少让几人出列可以达到这个理想状态。 最少人出列&#xff0c;其实就是一个人数最多的理想状态。求一个人数最多…

ppt倒计时_年终会议做一个这样的倒计时PPT,保证惊艳全场!1分钟就能学会

倒计时动画很经常被用在一些产品的发布会或是新年晚会的现场&#xff0c;因为倒计时可以营造除以中紧张的氛围~那么我们常见的倒计时动画都是怎么做出来的呢&#xff1f;其实一点也不难&#xff0c;不需要任何专业的视频软件&#xff0c;只要用我们日常工作中最常用的PPT就能做…

修改Advance Template Jsp模板的编码格式

2019独角兽企业重金招聘Python工程师标准>>> windows ——》 preferences ——》MyEclipse——》Files and Editers——》JSP 在此widzard中修改相应的编码。 转载于:https://my.oschina.net/wangfree/blog/127313

ASP.NET Core ---日志

一、日志记录&#xff1a; 1、日志的作用&#xff1a; 程序中记录日志一般有两个目的&#xff0c;故障定位和显示程序运行状态。好的日志记录方式可以提供足够多定位问题的依据。 2、日志的等级&#xff1a; 有良好工作习惯的人&#xff0c;工作的时候会将领导交待下来的工作分…

circle函数用法 turtle_Python绘图库Turtle详细分析

关注Python学习交流学习更多Python知识Turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff0c;(0,0)位置开始&#xff0c;它根据一组函数指令的控制&#xff0c;在这个平面坐标系中移动&am…

USB主机是如何检测到设备的插入的呢?

USB设备的插入检测机制 首先&#xff0c;在USB集线器的每个下游端口的D和D-上&#xff0c;分别接了一个15K欧姆的下拉电阻到地。这样&#xff0c;在集线器的端口悬空时&#xff0c;就被这两个下拉电阻拉到了低电平。而在USB设备端&#xff0c;在D或者D-上接了1.5K欧姆上拉电阻.…

单招计算机专业考多少分可以录取,单招考多少分能过?单招分数线

单独招生是高等职业院校的一种招生形式&#xff0c;和普通高考相比&#xff0c;虽然单招人数连年增加&#xff0c;但报考人数相比高考总人数还是略少的&#xff0c;竞争压力没有那么大&#xff0c;录取率相对高很多&#xff0c;基本不存在落榜&#xff0c;上大学更安全&#xf…

全国计算机等级考试题库二级C操作题100套(第97套)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

【job】2013年5-5阿里巴巴暑期实习招聘笔试题目及部分答案

网上各种标为2013年&#xff0c;实际上都是2012年或者更早的&#xff0c;下面的才是真正的2013年5月5日考试的卷子。 答题说明&#xff1a; 1.答题时间90分钟&#xff0c;请注意把握时间&#xff1b; 2.试题分为四个部分&#xff1a;单项选择题&#xff08;10题&#xff0c;20分…