Oracle Apex交互式网格：如何用前后按钮实现单行导航？

核心配置步骤 #

1. 设置交互式网格仅显示1行

   • 编辑目标交互式网格（IG）的属性，找到分页部分：
     • 将每页行数设置为1
     • 勾选禁用用户输入，防止用户修改显示行数
   • 可选：将IG的选择类型设置为单行，增强交互逻辑一致性

2. 添加导航按钮

   • 在页面上创建两个按钮：
     • BTN_PREV：显示文本「上一行」
     • BTN_NEXT：显示文本「下一行」
   • 将按钮放置在IG的上方或下方，方便用户操作

实现导航逻辑（两种方案） #

方案1：JavaScript操作IG API（无刷新，体验更优）

为两个按钮分别添加点击触发的动态动作，执行以下代码：

「上一行」按钮JS代码

// 替换 YOUR_IG_STATIC_ID 为你的交互式网格静态ID
var ig = apex.region("YOUR_IG_STATIC_ID").widget().interactiveGrid("getViews", "grid");
var currentRec = ig.getCurrentRecord();
var prevRec = ig.model.getPrevious(currentRec);

if (prevRec) {
    ig.setCurrentRecord(prevRec);
    ig.view$.scrollToRecord(prevRec);
}

「下一行」按钮JS代码

// 替换 YOUR_IG_STATIC_ID 为你的交互式网格静态ID
var ig = apex.region("YOUR_IG_STATIC_ID").widget().interactiveGrid("getViews", "grid");
var currentRec = ig.getCurrentRecord();
var nextRec = ig.model.getNext(currentRec);

if (nextRec) {
    ig.setCurrentRecord(nextRec);
    ig.view$.scrollToRecord(nextRec);
}

初始化默认选中第一行

添加页面加载完成触发的动态动作，执行JS：

var ig = apex.region("YOUR_IG_STATIC_ID").widget().interactiveGrid("getViews", "grid");
var firstRec = ig.model.first();
if (firstRec) {
    ig.setCurrentRecord(firstRec);
}

方案2：页面项+PL/SQL（适合后端逻辑联动场景）

1. 创建隐藏页面项：新增页面项PX_CURRENT_INDEX（类型：数字，初始值设为1），另一个项PX_TOTAL_ROWS存储总记录数（页面加载时通过PL/SQL查询赋值）
2. 编写按钮PL/SQL逻辑
   • 「上一行」按钮：

     IF :PX_CURRENT_INDEX > 1 THEN
         :PX_CURRENT_INDEX := :PX_CURRENT_INDEX - 1;
         apex_util.set_session_state('PX_OFFSET', :PX_CURRENT_INDEX - 1);
     END IF;
     

     执行后刷新交互式网格区域
   • 「下一行」按钮：

     IF :PX_CURRENT_INDEX < :PX_TOTAL_ROWS THEN
         :PX_CURRENT_INDEX := :PX_CURRENT_INDEX + 1;
         apex_util.set_session_state('PX_OFFSET', :PX_CURRENT_INDEX - 1);
     END IF;
     

     执行后刷新交互式网格区域
3. 关联IG分页偏移：编辑IG的分页属性，将偏移量设置为&PX_OFFSET.

注意事项 #

• 方案1无需页面刷新，交互更流畅，优先推荐
• 方案2需确保PX_TOTAL_ROWS数值准确，可通过SELECT COUNT(*) FROM 你的表赋值
• 测试边界情况：第一行点击「上一行」、最后一行点击「下一行」时无无效操作

内容的提问来源于stack exchange，提问作者chk.buddi