明细字段控制列显隐与属性联动

title: 根据明细字段控制列显隐与属性联动

需求场景

在明细表中，根据某字段（如“是否有未打卡”）的值，控制另外两列的全局显隐以及单行属性（只读/编辑）。

核心逻辑

全局显隐：只要明细中有一行满足条件（值="0"），则整列显示；否则整列隐藏。
使用 jQuery 操作 class .detail_hide_col。
属性联动：仅改变当前修改行的字段属性（只读/编辑）。
使用 WfForm.changeFieldAttr。 ery 操作 class .detail_hide_col。
属性联动：仅改变当前修改行的字段属性（只读/编辑）。
使用 WfForm.changeFieldAttr。## 代码实现

注意：必须使用 WfForm.convertFieldNameToId("字段名", "明细名") 获取 ID。注意：字段显隐必须遍历所有行判断，不能只操作当前行，否则会破坏表头。

const sfyswwdk_mx1_id = WfForm.convertFieldNameToId("sfyswwdk", "detail_1");
const hfsjmbrto_mx1_id = WfForm.convertFieldNameToId("hfsjmbrto_mx1", "detail_1");
const hfdmbrpo_mx1_id = WfForm.convertFieldNameToId("hfdmbrpo_mx1", "detail_1");

// 公共函数：检查所有行，控制列显隐
function checkAndToggleColumn() {
    var rowArr = WfForm.getDetailAllRowIndexStr("detail_1").split(",");
    var shouldShow = false;

    // 遍历所有行，只要有一行是 "0"，就显示
    for(var i=0; i<rowArr.length; i++){
        var rowIndex = rowArr[i];
        if(rowIndex === "") continue; 
        var val = WfForm.getFieldValue(sfyswwdk_mx1_id+"_"+rowIndex);
        if(val == "0"){
            shouldShow = true;
            break;
        }
    }

    // 统一操作整列 Class (严禁逐行切换 CSS，会破坏表头)
    if(shouldShow){
        jQuery(".hfsjmbrto_mx1_class").removeClass("detail_hide_col");
        jQuery(".hfdmbrpo_mx1_class").removeClass("detail_hide_col");
    } else {
        jQuery(".hfsjmbrto_mx1_class").addClass("detail_hide_col");
        jQuery(".hfdmbrpo_mx1_class").addClass("detail_hide_col");
    }
}

// 页面加载初始化
jQuery(document).ready(function(){
    checkAndToggleColumn();
});

// 明细新增行事件
WfForm.registerAction(WfForm.ACTION_ADDROW+"1", function(index){
    checkAndToggleColumn();
});
行事件
WfForm.registerAction(WfForm.ACTION_ADDROW+"1", function(index){
    checkAndToggleColumn();
});// 明细字段值变化事件
WfForm.bindDetailFieldChangeEvent(sfyswwdk_mx1_id, function(id, rowIndex, value){
    // 1. 属性联动：只改当前行
    if(value == "0"){
        WfForm.changeFieldAttr(hfsjmbrto_mx1_id+"_"+rowIndex, 3); // 可编辑
        WfForm.changeFieldAttr(hfdmbrpo_mx1_id+"_"+rowIndex, 3);
    } else {
        WfForm.changeFieldAttr(hfsjmbrto_mx1_id+"_"+rowIndex, 2); // 只读
        WfForm.changeFieldAttr(hfdmbrpo_mx1_id+"_"+rowIndex, 2);
    }

    // 2. 显隐联动：检查全表
    checkAndToggleColumn();
});

hfdmbrpo_mx1_id+"_"+rowIndex, 2); }

// 2. 显隐联动：检查全表
checkAndToggleColumn();

}); ``## 关键点 -jQuery(".class")选择的是整列，**不能**用jQuery("tr .class")否则会连同表头一起隐藏。 -checkAndToggleColumn` 必须遍历所有行，根据业务需求决定是“全为 X 才隐藏”还是“只要有一个 Y 就显示”。