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

1. 描述
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

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

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

2. 思路

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

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

3. 操作步骤

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

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

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

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

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

contentPane.on("cellselect", function (td){ $('.dirty').css('background-color',"rgb(153,204,0)"); //设置dirty类背景色 $('.dirty').css('font-weight',"bold"); //设置dirty类字体加粗 });

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