Oracle APEX 21.1基于列值动态修改表格图标优化方案咨询

完全可以通过动态渲染实现图标展示，无需在数据库中存储HTML标签，这里提供两种可行方案，均可以直接废弃icon_dashboard列：

方案1：JavaScript/jQuery实现（符合你提到的技术选型） #

前置配置 #

• 调整仪表板表格的查询SQL，新增两个隐藏列：etat_dashboard（状态值0/1）、email_dashboard（对应部门邮箱），不需要在前台展示，仅用于JS读取数据
• 保留原来的#LINK#列，设置为空白列即可

优化后代码（解决APEX报告分页/筛选后事件失效问题） #

首先给你的报表组件设置静态ID为inv_dashboard_report，再将以下代码添加到页面的「自定义JavaScript」区域即可：

// 绑定报告刷新后事件，分页、筛选、排序后仍会生效
apex.jQuery("#inv_dashboard_report").on("apexafterrefresh", function() {
    // 遍历每一行
    $(this).find("tbody tr").each(function() {
        // 读取列内容，nth-child后的序号请根据你实际的列顺序调整
        // 示例：第3列为状态展示列、第4列为隐藏的状态值列、第5列为隐藏的邮箱列、第6列为LINK列
        const statusText = $(this).find("td:nth-child(3)").text().trim();
        const email = $(this).find("td:nth-child(5)").text().trim();
        const $linkCol = $(this).find("td:nth-child(6)");

        // 同步处理行背景色和图标
        if (statusText === "Non validé") {
            $(this).children().css({'background-color': '#d88882'});
            // 未就绪状态显示邮件图标
            $linkCol.html(`<a href="mailto:${email}?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="发送提醒邮件"></span></span></a>`);
        } else if (statusText === "Validé") {
            $(this).children().css({'background-color': 'lightgreen'});
            // 就绪状态显示对勾图标
            $linkCol.html(`<span aria-label="已就绪"><span class="fa fa-check-circle-o" aria-hidden="true" title="已就绪"></span></span>`);
        }
    });
});

// 页面首次加载时触发一次渲染
$(document).ready(function() {
    $("#inv_dashboard_report").trigger("apexafterrefresh");
});

方案2：Oracle APEX原生实现（更推荐，性能更优，无需维护JS代码） #

这是APEX官方推荐的标准实现方案，完全不需要写JS代码，适配所有报告原生功能：

1. 调整仪表板表格的查询SQL，确保查询中包含etat_dashboard和email_dashboard字段
2. 进入LINK列的属性设置，将「列类型」修改为HTML表达式
3. 在HTML表达式输入框中填入以下代码：

{case ETAT_DASHBOARD/}
{when 0/}<a href="mailto:&EMAIL_DASHBOARD.?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="发送提醒邮件"></span></span></a>
{when 1/}<span aria-label="已就绪"><span class="fa fa-check-circle-o" aria-hidden="true" title="已就绪"></span></span>
{endcase/}

4. 行背景色也可以通过报告的「条件格式」原生功能配置：在报告属性中找到「条件格式」，新增两条规则，分别对应etat_dashboard=0和etat_dashboard=1，设置对应的行背景色即可。

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