拓展培训东莞网站建设,网页制作教程赵丰年,网站建设 管理 会议纪要,wordpress接入微信订阅号前言 应用系统有时候需要打印Datagrid的表格内容#xff0c;我们本节就来学习打印datagrid内容 打印主要使用#xff1a;web打印#xff08;我们之前有讲过web打印插件jqprint#xff09; 将datagrid重新编制成可以打印的html格式 一、建立一个普通的例子 我们使用官方下载…前言 应用系统有时候需要打印Datagrid的表格内容我们本节就来学习打印datagrid内容 打印主要使用web打印我们之前有讲过web打印插件jqprint 将datagrid重新编制成可以打印的html格式 一、建立一个普通的例子 我们使用官方下载的demo下的datagrid basic.html代码就好 引入Jqgrid打印插件并增加一个按钮来触发打印事件 !DOCTYPE html
html
headmeta charsetUTF-8titleBasic DataGrid - jQuery EasyUI Demo/titlelink relstylesheet typetext/css href../../themes/default/easyui.csslink relstylesheet typetext/css href../../themes/icon.csslink relstylesheet typetext/css href../demo.cssscript typetext/javascript src../../jquery.min.js/scriptscript typetext/javascript src../../jquery.easyui.min.js/scriptscript srcjquery.jqprint-0.3.js/script
/head
bodyh2Basic DataGrid/h2pThe DataGrid is created from markup, no JavaScript code needed./pdiv idmodalwindow classeasyui-window stylewidth:800px; height:400px; data-optionsmodal:true,closed:true,minimizable:false,shadow:false/divdiv stylemargin:20px 0;a href# idbtnPrint classeasyui-linkbutton data-optionsiconCls:icon-print stylewidth:80pxPrint/a/divtable idList classeasyui-datagrid titleBasic DataGrid stylewidth:700px;height:250pxdata-optionssingleSelect:true,collapsible:true,method:gettheadtrth data-optionsfield:itemid,width:80Item ID/thth data-optionsfield:productid,width:100Product/thth data-optionsfield:listprice,width:80,align:rightList Price/thth data-optionsfield:unitcost,width:80,align:rightUnit Cost/thth data-optionsfield:attr1,width:250Attribute/thth data-optionsfield:status,width:60,align:centerStatus/th/tr/thead/tablescript typetext/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 classmvctool bgba οnclick$(\.dg-pb\).jqprint(); classbtn btn-defaultspan classfa fa-print/spannbsp;打印/a/divtable cellspacing0 classdg-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 \ntr;if (typeof frozenColumns ! undefined typeof frozenColumns[index] ! undefined) {for (var i 0; i frozenColumns[index].length; i) {if (!frozenColumns[index][i].hidden) {tableString \nth 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 \nth 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 \ntr;$(nl).each(function (j) {var e nl[j].f.lastIndexOf(_0);tableString \ntd;if (nl[j].a ! undefined nl[j].a ! ) {tableString styletext-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
headmeta charsetUTF-8titleBasic DataGrid - jQuery EasyUI Demo/titlelink relstylesheet typetext/css href../../themes/default/easyui.csslink relstylesheet typetext/css href../../themes/icon.csslink relstylesheet typetext/css href../demo.cssscript typetext/javascript src../../jquery.min.js/scriptscript typetext/javascript src../../jquery.easyui.min.js/scriptscript srcjquery.jqprint-0.3.js/script
/headbodystyle/*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;}/styleh2Basic DataGrid/h2pThe DataGrid is created from markup, no JavaScript code needed./pdiv idmodalwindow classeasyui-window stylewidth:800px; height:400px; data-optionsmodal:true,closed:true,minimizable:false,shadow:false/divdiv stylemargin:20px 0;a href# idbtnPrint classeasyui-linkbutton data-optionsiconCls:icon-print stylewidth:80pxPrint/a/divtable idList classeasyui-datagrid titleBasic DataGrid stylewidth:700px;height:250pxdata-optionssingleSelect:true,collapsible:true,method:gettheadtrth data-optionsfield:itemid,width:80Item ID/thth data-optionsfield:productid,width:100Product/thth data-optionsfield:listprice,width:80,align:rightList Price/thth data-optionsfield:unitcost,width:80,align:rightUnit Cost/thth data-optionsfield:attr1,width:250Attribute/thth data-optionsfield:status,width:60,align:centerStatus/th/tr/thead/tablescript typetext/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 classmvctool bgb a href# idbtnPrint classeasyui-linkbutton data-optionsiconCls:\icon-print\ stylewidth:80px οnclick$(\.dg-pb\).jqprint();打印/a/divtable cellspacing0 classdg-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 \ntr;if (typeof frozenColumns ! undefined typeof frozenColumns[index] ! undefined) {for (var i 0; i frozenColumns[index].length; i) {if (!frozenColumns[index][i].hidden) {tableString \nth 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 \nth 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 \ntr;$(nl).each(function (j) {var e nl[j].f.lastIndexOf(_0);tableString \ntd;if (nl[j].a ! undefined nl[j].a ! ) {tableString styletext-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
