历史版本2 :JS实现预览时有边框，打印时无边框效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
一、需求描述编辑
平时在设置报表时，边框（内容）显示往往用来标注单元格显示区域，但是在打印时又不需要显示出来，如果遇见这种需求我们该任何处理呢…？这篇文档提供一个预览时显示边框，打印时不显示边框（内容）的解决方案。
图例1：
图例二：
二、解决思路编辑
我们可以通过添加加载结束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");
}
}
注：因为边框是在页面加载之后才‘画’上去的，而打印部分内容是打印页面加载初的内容。
三、示例（一）编辑
最终效果：预览时给某一行某一列内容单元格添加边框，打印时无边框！以第1行第1列为例：
3.1 打开模板 %FR_HOME%\WebReport\WEB-INF\reportlets\demo\authority\Authority_Content.cpt ， 选中内容单元格，将边框全部设置为“无”。
3.2 点击 模板-模板web属性-填报页面设置-为该模板单独设置-事件设置（加载结束），添加如下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.3 保存并预览
以填报方式打开并打印，效果见上图1。
四、示例（二）编辑
最终效果：预览时给所有内容单元格添加边框，打印时无边框！
4.1 打开模板 %FR_HOME%\WebReport\WEB-INF\reportlets\demo\authority\Authority_Content.cpt ，选中内容单元格，将边框全部设置为“无”。
4.2 点击 模板-模板web属性-填报页面设置-为该模板单独设置-事件设置（加载结束），添加如下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");
}
}
4.3 保存并预览
以填报方式打开并打印，效果见上图2。
5. 移动端编辑
移动端不支持各种打印和导出方式