Oracle APEX交互式网格：通过JavaScript DA按条件设置行背景色

原代码问题分析 #

• 选择器语法错误：td[headers]="idf_type_conv"] 多了一个闭合方括号，正确写法应为 td[headers="idf_type_conv"]
• 判断逻辑与需求不符：需求是idf_type_conv > 0 且 ≠73 且 ≠100，原代码仅判断值等于0
• 直接操作DOM的局限性：交互式网格刷新（分页、排序、筛选等）后，DOM元素会重新渲染，自定义样式会丢失

正确实现方式 #

方式1：动态动作+DOM操作（简单场景适用） #

1. 创建动态动作，触发条件选择页面加载和交互式网格刷新后（确保刷新后样式重新生效）
2. 动作类型选执行JavaScript代码，输入以下代码：

$('td[headers="idf_type_conv"]').each(function() {
    // 去除文本空格并转为数字，避免字符串比较误差
    const typeVal = parseInt($(this).text().trim(), 10);
    // 符合条件时添加样式类，否则移除
    if (!isNaN(typeVal) && typeVal > 0 && typeVal !== 73 && typeVal !== 100) {
        $(this).closest('tr').addClass('custom-row-bg');
    } else {
        $(this).closest('tr').removeClass('custom-row-bg');
    }
});

3. 在页面内联CSS中添加样式定义：

.custom-row-bg {
    background-color: #ffcccc !important; /* 可替换为你需要的颜色值 */
}

方式2：交互式网格API（稳定推荐） #

利用APEX内置API绑定行渲染事件，避免DOM操作的兼容性问题：

1. 给目标交互式网格设置静态ID（例如ig_target）
2. 创建动态动作，触发条件选页面加载，动作类型选执行JavaScript代码：

// 获取交互式网格实例
const igInstance = apex.region('ig_target').widget().interactiveGrid('getViews','grid');

// 绑定行初始化事件，每行渲染时自动触发
igInstance.model.subscribe({
    event: 'rowInit',
    callback: function(event, data) {
        const rowData = data.row;
        // 注意字段名需与网格列名一致（APEX默认大写）
        const typeVal = igInstance.model.getValue(rowData, 'IDF_TYPE_CONV');
        if (typeVal > 0 && typeVal !== 73 && typeVal !== 100) {
            rowData.domNode.classList.add('custom-row-bg');
        }
    }
});

3. 同样在页面内联CSS中添加样式：

.custom-row-bg {
    background-color: #ffcccc !important;
}

关键注意点 #

• 字段名IDF_TYPE_CONV必须与交互式网格中实际的列名完全一致（APEX中字段名默认大写）
• 使用parseInt转换文本值时，务必添加trim()处理，避免空格导致转换失败
• 样式中添加!important是为了覆盖APEX默认的单元格背景样式

内容的提问来源于stack exchange，提问作者Destrinx