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

1. 概述
1.1 问题描述

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

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

1.2 实现思路

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

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

2. 示例

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

2.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");
    
12. JS 代码，可直接使用下面的，更加简单：
    
13. 
    
14. 
    
15. var $td=$(arguments[0]);
    
16. //当前编辑单元格
    
17. $td.css("background-color","rgb(153,204,0)");
    
18. //设置所在单元格内容:颜色
    
19. $td.css("font-weight","bold");
    
20. //设置所在单元格内容:加粗

复制代码

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

复制代码

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

2.3 预览效果

保存模板，选择填报预览，实现效果下图所示：

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

注：经过测试，手机端和 H5 不支持该效果。

3. 模板下载

1）方法一

模板效果在线查看请点击：JS 实现填报时对修改过的单元格进行标识方法一.cpt

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

点击下载模板：16-JS实现填报时对修改过的单元格进行标识方法一.cpt

2）方法二

模板效果在线查看请点击：JS 实现填报时对修改过的单元格进行标识方法二.cpt

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

点击下载模板：16-JS实现填报时对修改过的单元格进行标识方法二.cpt

导入数据提交如何处理呢？

excle导入数据时怎么监听获取行数呢？