JS完成填报时对修悛改的单元格举行标识

  1. 形貌

在填报预览时,对单元格编辑后,其左上角有个赤色标记,但异常不显著,用户很难注意到。有无什么好的要领,对单元格操纵后,将其做较显著的特别标记处置惩罚,轻易用户辨认呢?

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

《JS完成填报时对修悛改的单元格举行标识》

  1. 完成要领

翻开模板 %FR_HOME%WebReportWEB-INFreportletsdocFormLineFormLineForm.cpt

2.1 要领1:编辑完毕后修正单元格款式

控件编辑后事宜中修正单元格款式,选中须要设置的单元格B3:K3,右击控件设置>事宜编辑,增添一个编辑完毕事宜:

《JS完成填报时对修悛改的单元格举行标识》

js代码以下:

1. var location = this.options.location;   

2. //猎取控件的位置  

3. var cr = FR.cellStr2ColumnRow(location);  

4. //单元格列号  

5. var col = cr.col;  

6. //单元格行号  

7. var ro = cr.row;  

8. //设置地点单元格背景色:草绿色   

9. $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("background-color","rgb(153,204,0)");  

10. //设置地点单元格内容:加粗  

11. $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("font-weight","bold");  

js代码,可直接运用下面的,越发简朴:

1. var $td=$(arguments[0]);  

2. //当前编辑单元格  

3. $td.css("background-color","rgb(153,204,0)");  

4. //设置地点单元格内容:色彩  

5. $td.css("font-weight","bold");  

6. //设置地点单元格内容:加粗  

2.2 要领2 直接修正值转变后的css款式

运用上述要领的话,必需对一切填报控件均要设置一遍编辑完毕事宜,假如模板中填报控件较多且不是一连的话,设置工作量比较大,效力也比较低,其实在填报中,每一个单元格值转变后,都邑触发内部的值转变事宜,而且会给单元格左上角加上小赤色三角,以下图所示

《JS完成填报时对修悛改的单元格举行标识》

对应的css类为dirty类,只须要修正css中这个dirty类的款式,增添一个背景色或增添加粗款式,在单元格值发作转变后,会自动运用这个dirty,即可完成对一切填报报表中值发作转变的控件均挪用这个款式,异常简朴实用,要领以下

增添加载完毕事宜,以下图

《JS完成填报时对修悛改的单元格举行标识》

代码以下:

1. contentPane.on("cellselect", function (td){        

2.   $('.dirty').css('background-color',"rgb(153,204,0)");    

3.   //设置dirty类背景色  

4.   $('.dirty').css('font-weight',"bold");    

5.   //设置dirty类字体加粗  

6. });   

运用这类要领后只须要在填报模板的加载完毕事宜中写一次代码即可,不须要再在每一个控件的编辑完毕事宜中零丁写代码

  1. 结果预览

保留模板,点击填报预览,结果如上图。

    原文作者:it老牛
    原文地址: https://segmentfault.com/a/1190000009048823
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞