JS实现文本控件编辑后根据条件显示样式

目录:

1. 描述

使用条件属性可以设置对单元格或文本控件在初始化时，根据条件属性显示不同的样式，如字体大小，颜色等等。但是在单元格控件编辑后，值发生了生改变，显示的样式依旧还是原来初始化后的样式，并没有根据编辑后的值改变样式。

比如参考条件属性修改高考成绩显示样式，小于60显示红色告警，大于或等于60恢复黑色，初始化时单元格样式发生了改变，但是如果在单元格设置了文本控件后，编辑后不会发生变化。


2. 思路

利用控件编辑结束事件事件，采用JS取单元格值，获取单元格文本框控件，再根据预期的条件分别判断，设置样式，即可。

3. 操作步骤

3.1 模板样式

在B3/B4单元格添加文本控件，B3单元格值为59，B4单元格值为90，设置条件属性，小于60为红色，大于或等于60为黑色，如下图：

3.2 添加编辑后事件

给B4/B5的文本控件，添加编辑后事件，如下图：

var td = $(arguments[0]);//获取当前编辑的单元格 var value = this.getValue();//取值 if (value < 60) { td.css({ "color": "red"//设置字体为红色 }); td.css({ "font-weight": "bold" //设置加粗 }); } else { td.css({ "color": "black"//设置字体颜色恢复黑色 }); td.css({ "font-weight": "normal"//设置为普通字体 }); }

注：采用编辑结束事件而不是编辑后事件是为了减少编辑时重复判断，避免模板多次计算。

4. 预览效果

4.1 PC端预览效果

4.2 移动端预览效果

注：此JS不支持移动端使用

5. 已完成模板

模板效果在线查看请点击：JS实现文本控件编辑后根据条件显示样式.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\32-JS实现文本控件编辑后根据条件显示样式.cpt
点击下载模板


附件列表


主题：
标签： 已验证 9.0验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）