JS实现填报时对修改过的单元格进行标识

编辑
文档创建者:yiyemeiying (78157 )     浏览次数:2725次     编辑次数:11次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

场景描述:在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到。有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢?

如图所示:对单元格进行操作后,将其单元格进行背景色着色、文本加粗等标记。

222

2. 思路编辑

在编辑完当前单元格结束后改变该单元格样式。

注:不要设置直接显示控件

3. 操作步骤编辑

打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

3.1 方法一:编辑结束后修改单元格样式

控件编辑后事件中修改单元格样式,选中需要设置的单元格B3:K3,右击控件设置>事件编辑,添加一个编辑结束事件:

222

js代码如下:

var location = this.options.location; //获取控件的位置 var cr = FR.cellStr2ColumnRow(location); //单元格列号 var col = cr.col; //单元格行号 var ro = cr.row; //设置所在单元格背景色:草绿色  $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("background-color","rgb(153,204,0)"); //设置所在单元格内容:加粗 $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("font-weight","bold");

js代码,可直接使用下面的,更加简单:

var $td=$(arguments[0]); //当前编辑单元格 $td.css("background-color","rgb(153,204,0)"); //设置所在单元格内容:颜色 $td.css("font-weight","bold"); //设置所在单元格内容:加粗
3.2  方法2 直接修改值改变后的css样式
使用上述方法的话,必须对所有填报控件均要设置一遍编辑结束事件,如果模板中填报控件较多且不是连续的话,设置工作量比较大,效率也比较低,其实在填报中,每个单元格值改变后,都会触发内部的值改变事件,并且会给单元格左上角加上小红色三角,如下图所示:
222
对应的css类为dirty类,只需要修改css中这个dirty类的样式,增加一个背景色或增加加粗样式,在单元格值发生改变后,会自动使用这个dirty,即可完成对所有填报报表中值发生改变的控件均调用这个样式,非常简单适用,方法如下
添加加载结束事件,如下图:
222
代码如下:
contentPane.on("cellselect", function (td){ $('.dirty').css('background-color',"rgb(153,204,0)"); //设置dirty类背景色 $('.dirty').css('font-weight',"bold"); //设置dirty类字体加粗 });
使用这种方法后只需要在填报模板的加载结束事件中写一次代码即可,不需要再在每个控件的编辑结束事件中单独写代码

4. 预览效果编辑

4.1 PC端预览效果

保存模板,点击填报预览,效果如上图。

注:为使效果更明显,此处将填报页面设置中的填报当前编辑行背景设置的勾选去除。

注:经过测试,手机端和h5不支持该效果。

5. 已完成模板编辑

1)方法一

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\16-JS实现填报时对修改过的单元格进行标识方法一.cpt

2)方法二

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\16-JS实现填报时对修改过的单元格进行标识方法二.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]