JS实现文本控件编辑后根据条件显示样式
1. 问题描述
使用条件属性可以设置对单元格或文本控件在初始化时，根据条件属性显示不同的样式，如字体大小，颜色等等。但是在单元格控件编辑后，值发生了生改变，显示的样式依旧还是原来初始化后的样式，并没有根据编辑后的值改变样式。
比如参考条件属性修改高考成绩显示样式，小于60显示红色告警，大于或等于60恢复黑色，初始化时单元格样式发生了改变，但是如果在单元格设置了文本控件后，编辑后不会发生变化。
那么，如何解决这种在实际填报中可能发生值变化，而样式随之变化呢。
2. 解决方法
利用控件编辑结束事件事件，采用JS取单元格值，获取单元格文本框控件，再根据预期的条件分别判断，设置样式，即可。
3. 示例
3.1 模板样式
在B3/B4单元格添加文本控件，B3单元格值为59，B4单元格值为90，设置条件属性，小于60为红色，大于或等于60为黑色，如下图：
3.2 添加编辑后事件
给B4/B5的文本控件，添加编辑后事件，如下图：
JS代码如下：
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"//设置为普通字体
});
}
注：采用编辑结束事件而不是编辑后事件是为了减少编辑时重复判断，避免模板多次计算。
3.3 效果预览
设置完成后保存，预览，效果如下：
可以看到，单元格控件编辑后，显示的样式根据编辑后的值进行了变化，就达到了我们预期的效果。
附件列表
主题： 二次开发
标签：
已验证