最新历史版本 :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%\webapps\webroot\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. 移动端编辑

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