【知淘出品】表单字段添加颜色样式，干货！！！
本帖最后由 北京知淘科技有限责任公司 于 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。
占个沙发！本公司专业做氚云定制，如有需要可以加我微信18010052675。 找到了，大哥你说的干货，话不多说，我去实践一下。 这个只能在电脑端显示颜色，手机端还是不行的。但是氚云，好多业务在手机上处理，不知道氚云什么时候才会增加颜色设置的更新 {:5_138:}从大佬发webservice的相关帖子的时候就开始关注楼主了，干货满满 iamachang 发表于 2020-11-16 11:02
从大佬发webservice的相关帖子的时候就开始关注楼主了，干货满满
这里还是想问一下，请问子表内的颜色设置要怎么写？楼主展示的代码是在主表的颜色设置吧
本帖最后由 北京知淘科技有限责任公司 于 2020-11-16 16:24 编辑
iamachang 发表于 2020-11-16 11:16
这里还是想问一下，请问子表内的颜色设置要怎么写？楼主展示的代码是在主表的颜色设置吧
...
var rows = this.子表编码.GetValue();
debugger
for( var i = 0;i < rows.length;i++ ) {
var PatentType = rows[ "PatentType" ];
var objectId = rows[ "ObjectId" ];
if(PatentType==null || objectId==null)
{
continue;
}
if( PatentType == "发明专利" ) {
$("#"+objectId).css({"background":"#FFFF00"});
}
else if ( PatentType == "实用新型专利" ) {
$("#"+objectId).css({"background":"#CCFFFF"});
}
}
大神，直接复用代码，表单可以变色，但是列表页面怎么变颜色，求指正 氚行天下 发表于 2020-11-26 22:27
大神，直接复用代码，表单可以变色，但是列表页面怎么变颜色，求指正
列表的看帮助
大夫地 发表于 2020-11-27 10:27
列表的看帮助
这个不就是列表吗，不理解说的帮助是在那看
氚行天下 发表于 2020-11-28 13:51
这个不就是列表吗，不理解说的帮助是在那看
这个是子表吧。
请问下如果是想修改子表内某行某个控件的颜色呢？ 子表每页只有10行，超过的后面则不显示颜色变化，请问怎么解决 子表颜色第一页有效，下一页后就无效了请问怎么解决
页:
[1]