Oracle APEX Interactive Grid/Report 相同值单元格合并实现方法问询

实现方法 #

1. 交互式报表（Interactive Report）配置步骤 #

• 打开目标交互式报表的属性面板，在「高级」分类下设置唯一的静态ID，例如my_report
• 在页面的动态操作板块，新建触发时机为「页面加载完成」的动态操作
• 为该动态操作添加「执行JavaScript代码」的真操作，粘贴以下代码：

// 替换为你设置的报表静态ID
const reportId = "my_report";
// 填入需要合并的列序号，从左到右从0开始计数
const mergeColIndex = [0,1];

const $table = apex.jQuery(`#${reportId} .t-IRR-table tbody`);
mergeColIndex.forEach(col => {
  let prevText = "";
  let mergeStart = 0;
  $table.find("tr").each(function (index) {
    const currText = $(this).find(`td:eq(${col})`).text().trim();
    if (currText === prevText) {
      $(this).find(`td:eq(${col})`).hide();
      $table.find(`tr:eq(${mergeStart}) td:eq(${col})`).attr("rowspan", index - mergeStart + 1);
    } else {
      prevText = currText;
      mergeStart = index;
    }
  });
});

• 按需修改代码中的mergeColIndex参数，指定需要合并的列即可。

2. 交互式网格（Interactive Grid）配置步骤 #

• 给目标交互式网格设置静态ID，例如my_grid
• 新建动态操作，触发时机选择「交互式网格 > 刷新后」，确保筛选、分页后合并效果依然生效
• 添加「执行JavaScript代码」的真操作，粘贴以下代码：

// 替换为你设置的网格静态ID
const gridId = "my_grid";
// 填入需要合并的列序号，从左到右从0开始计数
const mergeColIndex = [0,1];

const $table = apex.jQuery(`#${gridId} .a-GV-table tbody`);
mergeColIndex.forEach(col => {
  let prevText = "";
  let mergeStart = 0;
  $table.find("tr:not(.a-GV-row--padding)").each(function (index) {
    const currText = $(this).find(`td:eq(${col})`).text().trim();
    if (currText === prevText) {
      $(this).find(`td:eq(${col})`).hide();
      $table.find(`tr:not(.a-GV-row--padding):eq(${mergeStart}) td:eq(${col})`).attr("rowspan", index - mergeStart + 1);
    } else {
      prevText = currText;
      mergeStart = index;
    }
  });
});

注意事项 #

• 合并功能仅对排序后的列生效，请提前将需要合并的列设置为优先排序字段，保证同值数据连续排列，避免合并错乱
• 如需优化合并后单元格的显示样式，可在页面内联CSS中添加如下代码，实现内容垂直居中：

.t-IRR-table td[rowspan], .a-GV-table td[rowspan] {
  vertical-align: middle !important;
}

效果参考 #

默认展示效果 #

合并单元格后效果 #

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