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

编辑
文档创建者:yets11 (67190 )     浏览次数:2561次     编辑次数:9次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

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

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


222

那么,如何解决这种在实际填报中可能发生值变化,而样式随之变化呢。

2. 思路编辑

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

3. 操作步骤编辑

3.1 模板样式

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

222

3.2 添加编辑后事件

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

222

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"//设置为普通字体 }); }

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

4. 预览效果编辑

4.1 PC端预览效果

222

可以看到,单元格控件编辑后,显示的样式根据编辑后的值进行了变化,就达到了我们预期的效果。

4.2 移动端预览效果

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

5. 已完成模板编辑

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\32-JS实现文本控件编辑后根据条件显示样式.cpt


附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗?只是浏览 [ 去社区提问 ]