发帖

【知淘出品】表单字段添加颜色样式,干货!!!

产品使用讨论区  / 应用搭建教程  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-11-2

跳转到指定楼层

注册氚云社区,学习低代码知识,与更多氚友互动交流

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 北京知淘科技有限责任公司 于 2020-11-4 14:59 编辑

在实际工作中,如果表单字段非常多,审批的时候很容易眼花缭乱,分不清重点,这个时候如果能给某个字段加上颜色就会非常醒目。但氚云官方给出的提示是没有开放API给字段加颜色,只能在列表数据里面给某一列加颜色。那么到底能不能呢,先上图开开眼吧:

设置表单字段样式

设置表单字段样式
image.png
看到了吗?你可以给字体添加颜色,也可以给整个框添加背景颜色,甚至你还可以添加动画!

这里有2个雷区:
(1)氚云的前端渲染是异步的,有时候你用juery获取到了元素节点,但是里面的数据还没有渲染出来,所以有时你获取的节点就是undefined。因此我们还必须在父节点增加监控事件,如果发现有新的元素节点添加进来时再次通过jquery调用该节点,这样该功能才算完善。
(2)有人说没必要那么麻烦,只要获取".control-adapter--content"这个节点即可,直接在这个上面加个背景色就行,但是你忽略了一点,所有数据都在这个节点内部,而且内部也有自己的样式,优先级比父类更高。你设置的背景色之所以能够成功仅仅是因为子元素没有设背景色而已,不信的话你改下字体大小看能修改吗?


这里我直接贴代码了,即使你不懂其中的原理,按照我的代码直接复制也能直接用。(当然,你起码要知道一些基本的css知识)
第一步:在前端代码最上方,注意是在$.extend( $.JForm, )上方,复制粘贴以下代码
  1. //设置样式全局函数
  2. function SetStyle( id, style ) {
  3.     var PatentNoNode = document.getElementById( id );
  4.     if(PatentNoNode == null){
  5.         return;
  6.     }
  7.     var middle = PatentNoNode.getElementsByClassName( "control-adapter--content" )[ 0 ].getElementsByClassName( "control" )[ 0 ];
  8.     if( middle != null ) {
  9.         var PatentNoNode_Content = middle.firstElementChild;
  10.         PatentNoNode_Content.setAttribute( "style", style );
  11.     }
  12.     else {
  13.         $( '#' + id ).bind( 'DOMNodeInserted', function( e ) {
  14.             debugger
  15.             if( $( e.target ).html() != "" ) {
  16.                 SetStyle( id, style );
  17.             }
  18.         });
  19.     }
  20. }
复制代码


第二步,在onload中设置字段的样式,例如:
  1.         SetStyle( "PatentNo", "color:red;font-weight:bold;" );
  2.         SetStyle( "PatentName", "background-color:yellow" );
复制代码

这样问题就迎刃而解了,这里说明下,虽然这个不是氚云官方的API,但现在所有业务的前端都是用js来实现的,我们通过原生js来操作dom肯定是可行的,除非氚云刻意屏蔽该做法。
--------------说了这么多,顺便给我点个赞吧!--------------

本公司专业做氚云定制,如有需要可以加我微信18010052675。


回复

使用道具

北京知淘科技有限责任公司 发表于 2020-11-2 16:44:32
占个沙发!本公司专业做氚云定制,如有需要可以加我微信18010052675。
回复

使用道具 举报

北京知淘科技有限责任公司 发表于 2020-11-4 14:59:38
image.png
回复

使用道具 举报

1

主题

6

帖子

397

金币

lv4

Rank: 5

积分
270

氚云标准版氚云专业版

钉小靖 发表于 2020-11-5 15:02:49
找到了,大哥你说的干货,话不多说,我去实践一下。
回复

使用道具 举报

0

主题

1

帖子

21

金币

lv2

Rank: 1

积分
36

氚云专业版氚云标准版

星河 发表于 2020-11-10 09:36:26
这个只能在电脑端显示颜色,手机端还是不行的。但是氚云,好多业务在手机上处理,不知道氚云什么时候才会增加颜色设置的更新
回复

使用道具 举报

0

主题

5

帖子

238

金币

lv4

Rank: 5

积分
308

氚云标准版氚云专业版

iamachang 发表于 2020-11-16 11:02:45
从大佬发webservice的相关帖子的时候就开始关注楼主了,干货满满
回复

使用道具 举报

0

主题

5

帖子

238

金币

lv4

Rank: 5

积分
308

氚云标准版氚云专业版

iamachang 发表于 2020-11-16 11:16:03
iamachang 发表于 2020-11-16 11:02
从大佬发webservice的相关帖子的时候就开始关注楼主了,干货满满

这里还是想问一下,请问子表内的颜色设置要怎么写?楼主展示的代码是在主表的颜色设置吧
回复

使用道具 举报

北京知淘科技有限责任公司 发表于 2020-11-16 16:22:03
本帖最后由 北京知淘科技有限责任公司 于 2020-11-16 16:24 编辑
iamachang 发表于 2020-11-16 11:16
这里还是想问一下,请问子表内的颜色设置要怎么写?楼主展示的代码是在主表的颜色设置吧
...
  1. var rows = this.子表编码.GetValue();
  2.         debugger
  3.         for( var i = 0;i < rows.length;i++ ) {
  4.             var PatentType = rows[i][ "PatentType" ];
  5.             var objectId = rows[i][ "ObjectId" ];
  6.             if(PatentType==null || objectId==null)
  7.             {
  8.                 continue;
  9.             }
  10.             if( PatentType == "发明专利" ) {
  11.                 $("#"+objectId).css({"background":"#FFFF00"});
  12.             }
  13.             else if ( PatentType == "实用新型专利" ) {
  14.                 $("#"+objectId).css({"background":"#CCFFFF"});
  15.             }
  16.         }
复制代码


点评

氚友点评:: 5.0
氚友点评:: 5
非常感谢!  发表于 2020-11-23 08:49
回复

使用道具 举报

0

主题

3

帖子

64

金币

lv3

Rank: 3Rank: 3Rank: 3

积分
94

氚云专业版

氚行天下 发表于 2020-11-26 22:27:45
大神,直接复用代码,表单可以变色,但是列表页面怎么变颜色,求指正
回复

使用道具 举报

13

主题

117

帖子

1314

金币

lv5

Rank: 25

积分
1469

奥哲周年勋章氚云专业版氚云标准版

大夫地 发表于 2020-11-27 10:27:55
氚行天下 发表于 2020-11-26 22:27
大神,直接复用代码,表单可以变色,但是列表页面怎么变颜色,求指正

列表的看帮助
回复

使用道具 举报

0

主题

3

帖子

64

金币

lv3

Rank: 3Rank: 3Rank: 3

积分
94

氚云专业版

氚行天下 发表于 2020-11-28 13:51:25

image.jpg 这个不就是列表吗,不理解说的帮助  是在那看
回复

使用道具 举报

13

主题

117

帖子

1314

金币

lv5

Rank: 25

积分
1469

奥哲周年勋章氚云专业版氚云标准版

大夫地 发表于 2021-5-16 16:58:39
氚行天下 发表于 2020-11-28 13:51
这个不就是列表吗,不理解说的帮助  是在那看

这个是子表吧。
回复

使用道具 举报

2

主题

44

帖子

558

金币

lv5

Rank: 25

积分
858
leewell 发表于 2022-2-22 19:22:31
请问下  如果是想修改子表内某行某个控件的颜色呢?
回复

使用道具 举报

0

主题

8

帖子

1045

金币

lv5

Rank: 25

积分
1785
洛洛 发表于 2022-4-6 19:58:08
子表每页只有10行,超过的后面则不显示颜色变化,请问怎么解决
回复

使用道具 举报

0

主题

1

帖子

24

金币

lv2

Rank: 1

积分
34
cy16K49655830 发表于 2022-4-12 11:51:09
子表颜色第一页有效,下一页后就无效了请问怎么解决
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|氚云社区 |粤ICP备15096637号-1
Powered by Discuz! X3.4 Licensed  © 2001-2017 Comsenz Inc.