历史版本3 :JS实现预览时有边框，打印时无边框效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

平时在设置报表时，边框（内容）显示往往用来标注单元格显示区域，但是在打印时又不需要显示出来，如果遇见这种需求我们该任何处理呢…？这篇文档提供一个预览时显示边框，打印时不显示边框（内容）的解决方案。

图例1：

222

图例二：

222

2. 思路编辑

我们可以通过添加加载结束JS事件来实现！

示例1脚本：

var tr = $("tr", $('div.content-container')); for(var i=0;i<tr.length;i++){ var td=tr.eq(i).children().eq(0); td.removeClass("b0"); td.addClass("b1"); } for(var j=0;j<tr.eq(0).children().length;j++){ var td = tr.eq(0).children().eq(j); td.removeClass("b0"); td.addClass("b1"); }

示例2脚本：

var tr = $("tr", $('div.content-container')); for(var i=0;i<tr.length;i++) { for(var j=0;j<tr.eq(i).children().length;j++) { //获取td元素，也就是页面上的单元格 var td = tr.eq(i).children().eq(j); td.removeClass("b0"); td.addClass("b1"); } }

注：因为边框是在页面加载之后才‘画’上去的，而打印部分内容是打印页面加载初的内容。

3. 示例编辑

3.1 示例一

最终效果：预览时给某一行某一列内容单元格添加边框，打印时无边框！以第1行第1列为例：

1）打开模板 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\form\简单填报示例.cpt ， 选中内容单元格，将边框全部设置为“无”。

222

2）选择模板>模板web属性>填报页面设置，为该模板单独设置-事件设置（加载结束），如下图所示：

222

JS代码如下：

var tr = $("tr", $('div.content-container')); for(var i=0;i<tr.length;i++){ //获取td元素，也就是页面上的单元格，这边获取的是第一列 var td=tr.eq(i).children().eq(0); td.removeClass("b0"); td.addClass("b1"); } for(var j=0;j<tr.eq(0).children().length;j++){ //获取td元素，也就是页面上的单元格，这边获取的是第一行 var td = tr.eq(0).children().eq(j); td.removeClass("b0"); td.addClass("b1"); }  

3）保存并预览，以填报方式打开并打印，效果见上图1。

3.2 示例二

最终效果：预览时给所有内容单元格添加边框，打印时无边框！

1）同上，将上例中加载结束事件JS代码修改为：

var tr = $("tr", $('div.content-container')); for(var i=0;i<tr.length;i++){ for(var j=0;j<tr.eq(i).children().length;j++) { //获取td元素，也就是页面上的单元格 var td = tr.eq(i).children().eq(j); td.removeClass("b0"); td.addClass("b1"); } }

2）保存并预览，以填报方式打开并打印，效果见上图2。

4. 移动端编辑

移动端不支持各种打印和导出方式