easyUI datagrid打印功能实现与兼容
在easyUI datagrid的打印功能中,主要涉及将数据表格转换成适合打印的HTML页面,然后在IE、Chrome和360等浏览器上进行操作。这个过程通常包括以下几个关键步骤: 1. **页面准备**: 首先,你需要一个名为`PrintDg.js`的JavaScript文件,其中定义了创建打印页面和处理打印请求的函数。在这个文件中,创建了一个链接按钮(`<a>`元素),带有`icon-print`图标,用户点击时会触发`CreateFormPage`函数。 2. **`CreateFormPage`函数**: - 函数接收三个参数:`strPrintName`(可能是一个字符串,用于标识打印的内容)、`printDatagrid`(指向实际的数据表格对象)以及`title`(报表的标题)。这个函数的主要任务是生成HTML表格结构。 - 表格开始时,创建一个包含列标题的 `<table>` 标签,并设置了内间距和类名(如`.pb`)。 - 获取`printDatagrid`的选项,包括`frozenColumns`(冻结列)和`columns`(数据列)。 - 使用`$.each`遍历数据列,构建每一行,包括冻结列和非冻结列。隐藏的列不会被包含在打印结果中。 3. **处理冻结列和普通列**: - 检查`frozenColumns`数组,确保正确处理冻结列,它们通常位于表格的左侧,宽度固定。 - 对于每个数据列,根据其类型(`frozenColumns[index]`)动态添加 `<th>` 标签,设置宽度属性,同时保持表格结构的完整性。 4. **构建报表**: - 将循环生成的HTML代码拼接到`tableString`变量中,最终形成完整的HTML表格,包括标题和数据部分。 5. **打印**: - 在`CreateFormPage`函数内部,当用户点击打印按钮时,将生成的`tableString`插入到一个新的HTML页面`PrintInfo.html`中,然后弹出或预览这个页面供用户选择打印。 通过这种方式,easyUI datagrid能够实现数据的动态渲染并转化为适合打印的格式,使得用户可以在不同的浏览器环境下查看和打印定制化的报表。这个功能对于企业级应用,特别是那些需要生成各类报表的场景,非常实用。
包含PrintDg.js
<td><a href="javascript:void(0);" class="easyui-linkbutton c6"
iconCls="icon-print" onclick="CreateFormPage('${path}/js/index/PrintInfo.html', $('#dgPrtInfo'),'物料基本信息表')" style="width:70px;margin-left:10px">打印</a>
2、PrintDg.js
//strPrintName 打印任务名
//printDatagrid 要打印的datagrid
//title 表格标题
function CreateFormPage(strPrintName, printDatagrid,title) {
var tableString = '<table cellspacing="0" class="pb">';
//tableString+="<caption style='font-size: 20px; font-weight: bold;'>"+title+"</caption>";
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 + '"';
}
下载后可阅读完整内容,剩余4页未读,立即下载
- 粉丝: 3
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦