泛微E9开发 根据条件显示/隐藏明细行

1、需求说明

  1. 主表字段“全部显示/隐藏”(下拉框,值:0 全部显示、1 全部隐藏),用来控制所有明细行的显示、隐藏。

  2. 明细表字段“显示/隐藏”(下拉框,值:0 显示、1 隐藏),用来控制该明细行的显示、隐藏。

  3. 执行效果
    (1)新增两行明细
    在这里插入图片描述

    (2)第二行的“显示/隐藏”选择“隐藏”
    在这里插入图片描述
    (3)主表的“全部显示/隐藏”选择“全部显示”
    在这里插入图片描述
    (4)主表的“全部显示/隐藏”选择“全部隐藏”
    在这里插入图片描述

2、实现方法

代码块

<script>
  var qbxsycField = WfForm.convertFieldNameToId("qbxsyc");
  var sfycField = WfForm.convertFieldNameToId("sfyc","detail_1");
  
  jQuery(document).ready(function(){
    debugger;
    
    //全部显示/隐藏  控制全部明细表行
    WfForm.bindFieldChangeEvent(qbxsycField,function(obj,id,value){
      if(value == "1"){
        WfForm.controlDetailRowDisplay("detail_1", "all", true);
      }else{
        WfForm.controlDetailRowDisplay("detail_1", "all", false);
      }  
    });
  })
  
  //显示/隐藏,控制一条明细表行
  WfForm.bindDetailFieldChangeEvent(sfycField,function(id,rowIndex,value){
    if(value == "1"){
      WfForm.controlDetailRowDisplay("detail_1", rowIndex.toString(), true);
    }else{
      WfForm.controlDetailRowDisplay("detail_1", rowIndex.toString(), false);
    }
  });  
  
</script>

3、扩展知识点

控制明细数据行的显示及隐藏

注:只是界面效果隐藏,序号不会变化,即被隐藏行的前后行序号会断层不连续

格式

controlDetailRowDisplay: function(detailMark, rowIndexMark, needHide)

参数说明
参数参数类型必须说明
detailMarkString明细表标示,明细1就是detail_1,以此递增类推
rowIndexMarkString需要选中的行标示,选中全部行:all,选中部分行:”1,2,3”
needHideboolean是否隐藏行,true:隐藏,false:显示
演示
//明细1行标为3,5的隐藏不显示
WfForm.controlDetailRowDisplay("detail_1", "3,5", true);   

//明细1所有行不隐藏都显示
WfForm.controlDetailRowDisplay("detail_1", "all", false);
<think>好的,我现在需要帮助用户在E9中通过插入代码来改变明细的颜色。首先,我得先理解用户的需求。用户希望自定义明细表的颜色,可能根据某些条件或手动设置。接下来,我需要考虑E9的架构和可用的自定义方法。 根据用户提供的引用内容,特别是引用[1]中提到给单元格设置id属性,并通过CSS样式来添加自定义按钮。这可能意味着E9允许通过前端代码,如JavaScript和CSS,来自定义界面元素。所以,改变明细颜色可能也需要类似的方法。 然后,引用[2]提到隐藏明细表字段时使用了代码块,并涉及表格的创建和样式设置。这说明在E9中,可以通过代码操作表格的样式,可能包括或单元格的背景颜色。此外,引用[3]中的自定义接口执JAVA代码处理数据,但用户的需求是前端样式修改,所以可能不需要后端代码,而是前端脚本。 接下来,我需要思考具体的步骤。首先,用户需要给明细表的或单元格添加自定义属性,比如id或class,以便通过CSS或JavaScript定位。然后,通过JavaScript来动态修改这些元素的样式,比如背景颜色。可能需要使用jQuery或其他库,如果E9的环境支持的话。 可能的步骤如下: 1.明细表的或单元格设置id或class属性,方便后续样式绑定。 2. 编写CSS样式或JavaScript代码来改变颜色。 3. 将代码插入到E9的相应页面中,可能通过自定义脚本区域或单元格属性设置。 需要注意的是,不同版本的E9可能有不同的实现方式,可能需要查阅相关文档或测试环境。另外,如果明细表是动态生成的,可能需要事件监听,确保在数据加载后执样式修改。例如,使用MutationObserver或定时器检查元素是否存在。 同时,用户可能需要根据条件动态改变颜色,比如根据某个字段的值。这需要JavaScript逻辑来检查字段内容并应用相应的样式。例如,如果某个单元格的值超过阈值,整变为红色。 最后,需要验证这些步骤是否可,是否有权限或系统限制,以及代码的兼容性问题。可能还需要测试不同的浏览器,确保样式正确应用。</think>在E9中通过代码自定义明细颜色,可通过以下步骤实现: ### 一、设置单元格属性 1. 进入表单设计界面,右击需要修改的明细表单元格 2. 选择「设置自定义属性」-> 设置唯一`id`属性(如:`rowColor`)-> 保存[^1] 3. 对需要动态修改颜色的重复此操作,建议使用模式匹配id,如:`row_1`、`row_2` ### 二、插入CSS样式代码 在页面HTML头部或自定义CSS区域添加: ```css /* 设置整背景色 */ #row_1 { background-color: #ffe6e6 !important; } /* 设置特定单元格颜色 */ #row_2 td:nth-child(3) { background-color: #e6f3ff !important; text-align: center; /* 引用示例中的样式设置[^2] */ } ``` ### 三、动态修改脚本(JavaScript) 在表单加载事件或按钮事件中添加: ```javascript // 通过ID修改单颜色 document.getElementById(&#39;row_3&#39;).style.backgroundColor = &#39;#e6ffe6&#39;; // 批量修改符合条件 var rows = document.querySelectorAll(&#39;[id^="row_"]&#39;); rows.forEach(row => { if(row.cells[2].innerText === &#39;紧急&#39;) { row.style.backgroundColor = &#39;#ffcccc&#39;; } }); // 动态添加hover效果 $$(&#39;#明细表ID tr&#39;).hover( function(){ this.style.backgroundColor=&#39;#f5f5f5&#39; }, function(){ this.style.backgroundColor=&#39;&#39; } ); ``` ### 四、高级应用示例 结合接口数据动态设置颜色(需ESB接口支持[^3]): ```javascript // 调用自定义接口获取颜色配置 $.post(&#39;/api/getColorConfig&#39;, function(data){ data.forEach(item => { let targetRow = document.getElementById(&#39;row_&#39;+item.rowNum); if(targetRow) { targetRow.style.backgroundColor = item.colorCode; } }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击的巨无霸汉堡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值