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

简介:

1. 描述

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

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


2. 实现方法

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

2.1 方法1:编辑结束后修改单元格样式

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




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样式

使用上述方法的话,必须对所有填报控件均要设置一遍编辑结束事件,如果模板中填报控件较多且不是连续的话,设置工作量比较大,效率也比较低,其实在填报中,每个单元格值改变后,都会触发内部的值改变事件,并且会给单元格左上角加上小红色三角,如下图所示


对应的css类为dirty类,只需要修改css中这个dirty类的样式,增加一个背景色或增加加粗样式,在单元格值发生改变后,会自动使用这个dirty,即可完成对所有填报报表中值发生改变的控件均调用这个样式,非常简单适用,方法如下

添加加载结束事件,如下图




代码如下:

 

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. });    

使用这种方法后只需要在填报模板的加载结束事件中写一次代码即可,不需要再在每个控件的编辑结束事件中单独写代码

3. 效果预览

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




本文转自 雄霸天下啦 51CTO博客,原文链接:xxxhttp://blog.51cto.com/10549520/1915466如需转载请自行联系原作者
相关文章
|
8月前
|
XML JSON JavaScript
JS 将数据保存为 Excel(xls、xlsx)文件,支持单元格样式,合并单元格
JS 将数据保存为 Excel(xls、xlsx)文件,支持单元格样式,合并单元格
208 0
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
167 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
153 0
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
365 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
276 1
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
113 0
|
JavaScript 前端开发 算法
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
191 0