使用Easyui实现DataGrid内容在Dialog中的打印功能

需积分: 5 1 下载量 83 浏览量 更新于2024-11-02 收藏 1KB RAR 举报
资源摘要信息:"Easyui通过Dialog打印" 知识点: 1. Easyui框架介绍: Easyui是一个基于jQuery的前端UI框架,它简化了使用jQuery进行开发的过程,提供了一整套界面组件和相关功能。其中,DataGrid是一个展示数据的网格控件,支持分页、排序、搜索等功能。Dialog则是一个用于显示模态对话框的组件,可以用来显示信息、表单或者任意HTML内容。 2. DataGrid的基本使用: 在Easyui中,DataGrid通常通过指定一个<table>元素,并利用data-options属性来初始化配置。典型的配置项包括url(数据源地址)、columns(列配置)、pagination(分页配置)等。数据通过Ajax从服务器端动态获取,并在页面上展示。 3. Dialog组件的使用: 使用Dialog组件需要指定一个HTML元素作为容器,并通过data-options设置Dialog的属性,如title(标题)、width和height(宽度和高度)。可以通过data-show和data-hide属性来配置显示和隐藏时的回调函数,从而实现更复杂的逻辑。 4. 打印功能的实现: 打印通常涉及到将页面上的特定内容(如DataGrid)转换到一个可打印的格式,然后触发浏览器的打印功能。在Easyui框架中,可以通过编程方式将DataGrid的内容复制到Dialog中,然后通过Dialog提供的打印功能或使用JavaScript的window.print()方法来实现打印。 5. 实现步骤: a. 创建HTML结构,包括DataGrid和Dialog的容器元素。 b. 通过JavaScript初始化DataGrid和Dialog组件。 c. 编写函数,该函数负责获取DataGrid中的数据,并将其设置到Dialog中。 d. 在需要打印时调用此函数,将DataGrid的数据填充到Dialog,并展示Dialog。 e. 通过用户交互(如点击打印按钮)触发打印事件,实现打印功能。 6. 编程细节: a. 使用jQuery和Easyui的API来操作DOM元素和组件。 b. 确保打印内容的格式符合打印需求,比如调整表格列宽,隐藏不需要打印的元素等。 c. 对于复杂的打印需求,可能需要借助服务器端的打印服务或第三方打印库。 d. 考虑到不同浏览器的兼容性问题,测试打印功能在主流浏览器上的表现。 7. 代码实现示例: 示例代码将展示如何利用Easyui组件和jQuery将DataGrid内容动态加载到Dialog中,并实现打印功能。代码中会包含HTML结构的设置、JavaScript初始化和逻辑处理等关键部分。 8. 注意事项: a. 当使用window.print()方法时,确保打印时的样式与预览时一致,避免CSS样式冲突。 b. 打印时可能会遇到页面布局和打印布局不一致的问题,需要特别注意。 c. 如果打印内容很多,需要考虑分页问题,避免打印内容超出页面范围。 d. 打印预览功能的实现也是提高用户体验的重要部分,可以使用window.matchMedia()来检测媒体查询,判断是否处于打印预览模式。 以上内容提供了关于如何使用Easyui框架中的DataGrid和Dialog组件实现打印功能的知识点,涵盖了组件的基本使用、编程实现步骤和注意细节等多个方面,为实现该功能提供了全面的技术指导。
2014-08-11 上传
如题,项目要用到jeasyui,所以必须要下载它的demo,获取相应的js,css等等的文件 jeasyui的下载地址:http://www.jeasyui.com/download/index.php <!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> <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="easyui/demo.css" rel="stylesheet" type="text/css" /> <script src="easyui/jquery.min.js" type="text/javascript"></script> <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#tab").datagrid({ // width: 600, //宽度 height: 400, //高度 singleSelect: true, //选中一行的设置 fitColumns:true, url: "EditorUserHandler.ashx", //请求路径 title: "用户信息", //标题 iconCls: "icon-add", //图标 // collapsible: true, //隐藏按钮 //冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#tab").datagrid('getPager').pagination({ beforePageText: "第", afterPageText: "页", displayMsg: "当前 {from} - {to}条数据 共{total} 条数据", pageSize: 10, pageList: [5, 10, 15, 20, 30] }); }) </script> <script type="text/javascript"> function CreateFormPage(strPrintName, printDatagrid) { var tableString = '
半年广东省房屋市政工程安全生产文明施工示范工地申报项目汇总表
地区(部门)公 章: 报送时间: 年 月 日
'; 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'; 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 + ''; } } } 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 + ''; } } tableString += '\n'; }); } // 载入内容 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></div>'; window.showModalDialog("/print.htm", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); } </script> <script type="text/javascript"> function ChangeToTable(printDatagrid) { var tableString = '
'; 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'; 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 + ''; } } } 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 + ''; } } tableString += '\n'; }); } // 载入内容 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) { } } </script> </head> <body> 打印导出
编号 姓名 详细信息 登录信息
地址 电话 邮箱 登录名 密码

<form id="fm_dg"> 编号:<input id="flid" name="flid" class="easyui-numberbox" type="text" required="true" missingMessage="请输入编号" />
姓名:<input id="flname" name="flname" class="easyui-validatebox" required="true" missingMessage="请输入姓名"/>
地址:<input id="fladdress" name="fladdress" class="easyui-validatebox" type="text" required="true" missingMessage="请输入地址" />
电话:<input id="flphone" name="flphone" class="easyui-validatebox" type="text" required="true" missingMessage="请输入电话" />
邮箱:<input id="flMail" name="flMail" class="easyui-validatebox" type="text" validType="email" required="true" missingMessage="请输入邮箱" />
登录名:<input id="flloginname" name="flloginname" class="easyui-validatebox" type="text" required="true" missingMessage="请输入登录名" />
密码:<input type="password" id="flloginpwd" name="flloginpwd" class="easyui-validatebox" required="true" missingMessage="请输入密码" />
</form>
</body> </html>