Oracle Apex：Shuttle页面项保留已选条目方案问询

核心思路 #

要实现切换左侧级联列表时右侧已选条目不消失，可从数据源逻辑或前端动态控制两个方向入手，以下是两种可行方案：

方案一：通过SQL数据源强制保留已选条目 #

这种方式无需额外JS，直接通过Shuttle的SQL查询确保已选值始终出现在可选列表中，切换级联条件时不会被移除。

1. 配置Shuttle的SQL查询：
   假设级联选择列表为P1_PARENT，Shuttle项为P1_SHUTTLE，数据来自表YOUR_TABLE（包含parent_id、display_value、return_value字段），SQL写法如下：

   SELECT display_value, return_value
     FROM YOUR_TABLE
    WHERE parent_id = :P1_PARENT
    UNION
   SELECT display_value, return_value
     FROM YOUR_TABLE
    WHERE return_value IN (:P1_SHUTTLE)
    ORDER BY display_value
   

   逻辑说明：

   • 第一部分：获取当前级联选择对应的可选条目
   • 第二部分：追加所有已选的条目（即使不属于当前级联）
   • UNION自动去重，避免重复显示

2. 级联设置：
   给P1_PARENT选择列表添加动态动作，当值变化时刷新Shuttle组件即可。

方案二：前端JS缓存并恢复已选值 #

如果不想让已选的非当前级联条目出现在左侧可选列表，仅保留在右侧，可通过JavaScript缓存已选值，刷新后恢复。

1. 给级联选择列表（如P1_PARENT）添加动态动作：

   • 触发条件：值变化
   • 动作1：执行JavaScript代码（缓存当前已选值）：

     // 保存Shuttle当前已选值到sessionStorage
     const selected = apex.item("P1_SHUTTLE").getValue();
     sessionStorage.setItem("shuttleSaved", selected);
     

   • 动作2：刷新组件：选择Shuttle项（P1_SHUTTLE）进行刷新
   • 动作3：执行JavaScript代码（恢复已选值）：

     // 读取缓存的已选值并设置回Shuttle
     const saved = sessionStorage.getItem("shuttleSaved");
     if (saved) apex.item("P1_SHUTTLE").setValue(saved);
     

2. 注意事项：

   • 页面刷新后sessionStorage会清空，如需持久化可改用localStorage，但需添加清理逻辑
   • 确保Shuttle的Multiple属性设为Yes（默认配置）

页面传值兼容 #

Shuttle的返回值是逗号分隔的字符串，和原复选框组的格式完全一致，直接在页面跳转时传递:P1_SHUTTLE即可，无需额外转换。

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