注册氚云社区,学习低代码知识,与更多氚友互动交流
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
本帖最后由 北京知淘科技有限责任公司 于 2020-11-4 14:59 编辑
在实际工作中,如果表单字段非常多,审批的时候很容易眼花缭乱,分不清重点,这个时候如果能给某个字段加上颜色就会非常醒目。但氚云官方给出的提示是没有开放API给字段加颜色,只能在列表数据里面给某一列加颜色。那么到底能不能呢,先上图开开眼吧:
设置表单字段样式
看到了吗?你可以给字体添加颜色,也可以给整个框添加背景颜色,甚至你还可以添加动画!
这里有2个雷区:
(1)氚云的前端渲染是异步的,有时候你用juery获取到了元素节点,但是里面的数据还没有渲染出来,所以有时你获取的节点就是undefined。因此我们还必须在父节点增加监控事件,如果发现有新的元素节点添加进来时再次通过jquery调用该节点,这样该功能才算完善。
(2)有人说没必要那么麻烦,只要获取".control-adapter--content"这个节点即可,直接在这个上面加个背景色就行,但是你忽略了一点,所有数据都在这个节点内部,而且内部也有自己的样式,优先级比父类更高。你设置的背景色之所以能够成功仅仅是因为子元素没有设背景色而已,不信的话你改下字体大小看能修改吗?
这里我直接贴代码了,即使你不懂其中的原理,按照我的代码直接复制也能直接用。(当然,你起码要知道一些基本的css知识)
第一步:在前端代码最上方,注意是在$.extend( $.JForm, )上方,复制粘贴以下代码- //设置样式全局函数
- function SetStyle( id, style ) {
- var PatentNoNode = document.getElementById( id );
- if(PatentNoNode == null){
- return;
- }
- var middle = PatentNoNode.getElementsByClassName( "control-adapter--content" )[ 0 ].getElementsByClassName( "control" )[ 0 ];
- if( middle != null ) {
- var PatentNoNode_Content = middle.firstElementChild;
- PatentNoNode_Content.setAttribute( "style", style );
- }
- else {
- $( '#' + id ).bind( 'DOMNodeInserted', function( e ) {
- debugger
- if( $( e.target ).html() != "" ) {
- SetStyle( id, style );
- }
- });
- }
- }
复制代码
第二步,在onload中设置字段的样式,例如:
- SetStyle( "PatentNo", "color:red;font-weight:bold;" );
- SetStyle( "PatentName", "background-color:yellow" );
复制代码
这样问题就迎刃而解了,这里说明下,虽然这个不是氚云官方的API,但现在所有业务的前端都是用js来实现的,我们通过原生js来操作dom肯定是可行的,除非氚云刻意屏蔽该做法。
--------------说了这么多,顺便给我点个赞吧!--------------
本公司专业做氚云定制,如有需要可以加我微信18010052675。
|