Oracle APEX交互式网格双击记录打开模态对话框传参方法

• 前置配置
  • 提前创建目标模态对话框页面，在该页面新建两个页面项用于接收参数：分别对应sql_id（如PXX_SQL_ID）、sql_exec_id（如PXX_SQL_EXEC_ID），不需要提前在父页绑定跳转触发事件。
  • 给需要绑定事件的交互式网格设置固定静态ID（例如SQL_MONITOR_IG），避免APEX自动生成ID变动导致JS失效。
  • 确认存储当前筛选sql_id的页面元素：如果上方列表的选中sql_id是存入隐藏页面项的，记住该页面项ID（例如PXX_FILTER_SQL_ID）；如果是直接存在列表组件中，提前确认列表的静态ID。
• 绑定双击行事件
  在交互式网格所在页面的「页面加载时执行」动态动作中，添加执行JavaScript代码动作，写入以下逻辑：

const igWidget = apex.region("SQL_MONITOR_IG").widget();
// 委托绑定行双击事件，兼容IG虚拟滚动、分页加载场景
igWidget.off("dblclick.igCustomDblclick", ".a-GV-row")
  .on("dblclick.igCustomDblclick", ".a-GV-row", function(e) {
    e.preventDefault();
    // 获取当前双击行的绑定数据
    const gridView = igWidget.interactiveGrid("getViews", "grid");
    const curRecord = gridView.model.getRecord($(this).data("recordId"));
    // 提取当前行的sql_exec_id，注意字段名和IG数据源返回列名大小写完全一致
    const execId = gridView.model.getValue(curRecord, "SQL_EXEC_ID");
    // 提取当前筛选的sql_id：如果存在页面项就用$v取值，如果是列表选中值替换为对应列表的取值逻辑
    const sqlId = $v("PXX_FILTER_SQL_ID");

    // 调用APEX原生API打开模态框，替换下方的模态页页码为你自己的目标页号
    const dialogUrl = `f?p=&APP_ID.:<替换为你的模态页页码>:&SESSION.::NO::PXX_SQL_ID,PXX_SQL_EXEC_ID:${sqlId},${execId}`;
    apex.navigation.dialog(
      dialogUrl,
      {
        title: "SQL执行明细",
        height: "85vh",
        width: "90vw",
        modal: true,
        resizable: true
      },
      "t-Dialog-page--standard",
      $(this)
    );
  });

• 注意事项
  • 事件绑定必须用jQuery委托写法，不要直接给当前渲染的.a-GV-row元素绑定事件，否则IG虚拟滚动、翻页后新加载的行不会触发双击逻辑。
  • 从IG模型取值时，列名必须和数据源返回的列名完全匹配，Oracle数据源默认返回大写字段名，如果自定义了别名要和别名保持一致，否则会取到空值。
  • 必须使用apex.navigation.dialogAPI打开模态框，不要自己写弹窗逻辑或者用原生window.open，否则会破坏APEX的会话校验、父子页面传值、弹窗关闭回调等原生逻辑。
  • 绑定事件前先通过off解绑同名自定义事件，避免页面局部刷新后事件重复绑定，导致一次双击触发多次弹窗。
  • 如果上方列表的sql_id不是存在页面项中，将代码中const sqlId = $v("PXX_FILTER_SQL_ID")替换为对应组件的取值逻辑即可，比如列表静态ID为SQL_ID_LIST时，替换为const sqlId = apex.item("SQL_ID_LIST").getValue()。

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