Oracle APEX中基于页面项切换显示/隐藏两个Interactive Grid的方法

最直接且易维护的方式是使用动态操作，也可以通过JavaScript实现更灵活的逻辑，以下是两种方案的详细步骤：

方案一：使用动态操作（推荐） #

这种方式无需手写大量代码，通过可视化配置即可完成，适合常规场景：

1. 设置静态ID：给两个Interactive Grid分别配置静态ID（比如ig_employee和ig_department），配置路径为：交互式网格属性面板 → 高级 → 静态ID。同时确保控制切换的页面项（比如下拉选单P1_SWITCH）已配置好可选值（比如EMP和DEPT）。

2. 创建动态操作：

   • 新建动态操作，命名为「切换交互式网格显示状态」
   • 触发条件：选择「页面项值更改」，触发项选择你的控制页面项（如P1_SWITCH）；同时添加「页面加载」触发事件，确保页面初始化时就应用正确的显示状态。
   • 添加条件分支：
     • 分支1：条件设为P1_SWITCH = 'EMP'
       • 分支内添加两个动作：
         • 动作1：选择「显示」，目标选择第一个Interactive Grid（通过静态ID或选择器#ig_employee）
         • 动作2：选择「隐藏」，目标选择第二个Interactive Grid（#ig_department）
     • 分支2：条件设为P1_SWITCH = 'DEPT'
       • 分支内添加两个动作：
         • 动作1：选择「隐藏」，目标选择第一个Interactive Grid
         • 动作2：选择「显示」，目标选择第二个Interactive Grid

方案二：使用JavaScript实现 #

如果需要更复杂的判断逻辑，可通过JavaScript实现：

1. 定义切换函数：在页面的「Function and Global Variable Declaration」中添加以下代码：

function toggleIGDisplay() {
  const switchVal = apex.item('P1_SWITCH').getValue();
  const ig1 = apex.jQuery('#ig_employee');
  const ig2 = apex.jQuery('#ig_department');
  
  if (switchVal === 'EMP') {
    ig1.show();
    ig2.hide();
  } else if (switchVal === 'DEPT') {
    ig1.hide();
    ig2.show();
  }
}

2. 绑定触发事件：
   • 给控制页面项P1_SWITCH的「高级 → 当值更改时」属性设置为toggleIGDisplay();
   • 新建一个页面加载时的动态操作，执行动作选择「执行JavaScript代码」，代码内容为toggleIGDisplay();，确保初始状态正确。

内容的提问来源于stack exchange，提问作者Mohan babu K C