如何不依赖TD索引生成APEX交互式报表JSON以规避列序变更问题

核心思路 #

放弃依赖TD列索引的方式，给每个包含APEX.ITEM的报表列绑定自定义唯一标识（类似IG的data-id），通过标识关联对应数据库字段，生成与列序无关的可靠JSON。

具体实现步骤 #

1. 给报表列添加自定义标识 #

在交互式报表的列属性中，进入高级选项，找到自定义属性，为每个需要绑定APEX.ITEM的列添加data-column-id="对应B表字段名"，比如B表的EMP_ID字段就设置为data-column-id="EMP_ID"。

2. 前端JS通过自定义标识生成JSON #

替换原依赖TD索引的JS代码，改为通过自定义标识匹配字段：

针对交互式网格（IG）：

var rows = apex.region("你的报表区域ID").widget().interactiveGrid("getViews", "grid").model.getRecords();
var dataArray = [];

rows.forEach(function(row) {
    var rowData = {};
    row.domNode.querySelectorAll(".apex-item").forEach(function(item) {
        // 通过父元素TD获取自定义字段标识
        var columnId = item.closest("td").getAttribute("data-column-id");
        rowData[columnId] = apex.item(item.id).getValue();
    });
    dataArray.push(rowData);
});

var jsonData = JSON.stringify(dataArray);

针对传统交互式报表：

var dataArray = [];
// 遍历报表每一行
$("#你的报表区域ID .a-IRR-table tr").each(function() {
    var rowData = {};
    // 遍历带自定义标识的列
    $(this).find("td[data-column-id]").each(function() {
        var columnId = $(this).attr("data-column-id");
        var itemId = $(this).find(".apex-item").attr("id");
        rowData[columnId] = apex.item(itemId).getValue();
    });
    dataArray.push(rowData);
});

var jsonData = JSON.stringify(dataArray);

3. 后端MERGE语句解析JSON #

后端依旧使用MERGE操作，通过JSON_TABLE解析前端传来的JSON，因为JSON的key就是数据库字段名，完全不受列序影响：

MERGE INTO B_TABLE b
USING (
    SELECT 
        jt.*
    FROM JSON_TABLE(
        :P_JSON_DATA,
        '$[*]' COLUMNS (
            EMP_ID VARCHAR2(50) PATH '$.EMP_ID',
            EMP_NAME VARCHAR2(100) PATH '$.EMP_NAME',
            SALARY NUMBER PATH '$.SALARY'
        )
    ) jt
) src
ON (b.EMP_ID = src.EMP_ID)
WHEN MATCHED THEN
    UPDATE SET 
        b.EMP_NAME = src.EMP_NAME,
        b.SALARY = src.SALARY
WHEN NOT MATCHED THEN
    INSERT (EMP_ID, EMP_NAME, SALARY)
    VALUES (src.EMP_ID, src.EMP_NAME, src.SALARY);

关键优势 #

• 彻底摆脱用户调整列序的影响，绑定的是字段名而非列位置
• JSON结构与数据库表列一一对应，可读性和维护性更强

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