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

zone 发布于2019-08-20 15:45 / 1474人阅读

摘要：描述在填报预览时，对单元格编辑后，其左上角有个红色标记，但非常不明显，用户很难注意到。有没有什么好的办法，对单元格操作后，将其做较明显的特殊标记处理，方便用户识别呢如图所示对单元格进行操作后，将其单元格进行背景色着色文本加粗等标记。

描述

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

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

实现方法

打开模板 %FR_HOME%WebReportWEB-INFreportletsdocFormLineFormLineForm.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. });

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

效果预览

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

云服务器 GPU云服务器 js如何拆分单元格 js设置单元格宽度 js添加数据自动合并单元格 html的合并单元格合并单元格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82464.html

Web报表工具FineReport的JS API开发（二）

摘要：如果报表嵌在网页的中，在外获取对象如下常用方法方法说明获取指定单元格中的控件获取指定名字的控件获取指定名称的扩展控件，返回一个数组表单预览或参数界面，都有一个对象。上次介绍FineReport的JS API中的第一类开发--FR，这次就来介绍一下FS和contentWindow类的开发。1 FSFS是数据决策系统中的js接口，比如说FS.tabPane.addItem，先介绍几类操作...

freewolf 2019-08-19 17:56 评论0 收藏0
FineReport中如何用JavaScript解决控件值刷新不及时

摘要：优化过后则可以将光标强制跳转到单元格，使其获得光标，进而强制单元格刷新值。常见场景用户通过文本框填报了值，而需要对这个值进行取出判断的时候，经常会取空值，只有用户点击了空白区域，才可以正常取值。我们经常利用按钮进行一些页面值的处理工作，但是默认的逻辑造成，每次新填报的值，需要点击下空白区域或是执行某个其他操作才可以被正确读取，那么我们如何处理呢？例：当我们用常规取值的时候，虽然B3...

Xufc 2019-08-20 15:06 评论0 收藏0
FineReport填报分页设置

摘要：示例下面我们以行数据为例，每页显示行，分页显示。数据准备新建数据集订单明细。重复标题行选中标题行，右键，选择设置重复标题行。问题描述进行FineReport数据填报时，如果数据量过大，由于前端浏览器的性能限制，如果将数据全部展现出来，速度会非常的慢，影响用户体验，这时候大家就会想，填报是否能像分页预览一样进行分页呢，实现只加载当前页，从而提高性能，下面我们就来介绍填报分页的制作与浏...

Rindia 2019-08-16 10:37 评论0 收藏0
FineReport填报分页设置

摘要：示例下面我们以行数据为例，每页显示行，分页显示。数据准备新建数据集订单明细。重复标题行选中标题行，右键，选择设置重复标题行。问题描述进行FineReport数据填报时，如果数据量过大，由于前端浏览器的性能限制，如果将数据全部展现出来，速度会非常的慢，影响用户体验，这时候大家就会想，填报是否能像分页预览一样进行分页呢，实现只加载当前页，从而提高性能，下面我们就来介绍填报分页的制作与浏...

xialong 2019-08-01 17:02 评论0 收藏0
SpreadJS 纯前端表格控件 V12.2 发布更新

摘要：用不到行代码，在前端实现的全部功能千万前端开发者翘首企盼，终发布更新六大功能特性，带来更多便利，用不到行代码，在前端实现的全部功能是一款基于的纯前端电子表格控件，以高速低耗高度类似可无限扩展为产品特色，提供移动跨平台和浏览器支持，同时满足等用不到100行代码，在前端实现Excel的全部功能千万前端开发者翘首企盼，SpreadJS V12.2 终发布更新：六大功能特性，带来更多便利，...

FrozenMap 2019-08-26 10:45 评论0 收藏0