如何在交互式报表中根据页面对象值修改行背景色

需求说明 #

程序中有一个隐藏页面对象，点击订单报表任意行时，该对象会获取对应订单ID并更新订单详情表（功能正常）。现需根据该页面对象的订单ID，修改报表中对应ID行的背景色（如页面对象值为2时，高亮订单ID为2的行）。

实现方案 #

1. 给报表行添加标识

在订单报表的行渲染时，给每一行的<tr>标签添加自定义属性，绑定订单ID：

<tr data-order-id="#ORDER_ID#">
  <!-- 报表列内容 -->
</tr>

注：#ORDER_ID#替换为你报表中订单ID的实际字段变量。

2. 监听页面对象值变化并高亮行

使用JavaScript监听隐藏页面对象的数值变化，动态切换行的高亮状态。假设隐藏页面对象为P1_HIDDEN_ORDER_ID，报表表格类名为.order-report：

// 监听页面对象值变更
apex.item('P1_HIDDEN_ORDER_ID').on('change', function() {
  const targetId = this.getValue();
  
  // 清除所有行的高亮样式
  document.querySelectorAll('.order-report tr[data-order-id]').forEach(row => {
    row.classList.remove('highlight-row');
  });
  
  // 高亮目标行
  if (targetId) {
    const targetRow = document.querySelector(`.order-report tr[data-order-id="${targetId}"]`);
    targetRow?.classList.add('highlight-row');
  }
});

// 页面加载时初始化高亮（若页面对象已有值）
document.addEventListener('DOMContentLoaded', function() {
  const initialId = apex.item('P1_HIDDEN_ORDER_ID').getValue();
  if (initialId) {
    const targetRow = document.querySelector(`.order-report tr[data-order-id="${initialId}"]`);
    targetRow?.classList.add('highlight-row');
  }
});

3. 定义高亮样式

在页面CSS中添加高亮的样式规则：

.highlight-row {
  background-color: #e6f7ff !important; /* 可根据需求调整颜色 */
}

注：请将代码中的P1_HIDDEN_ORDER_ID、.order-report替换为你项目中的实际名称。

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