如何更改 Oracle APEX 交互式网格的行为以将行添加到网格的顶部而不是底部？答案

【问题标题】：How do change behavior of Oracle APEX interactive grid to add row to the top rather than bottom of the grid?如何更改 Oracle APEX 交互式网格的行为以将行添加到网格的顶部而不是底部？
【发布时间】：2020-10-28 18:51:16
【问题描述】：

我正在使用标准的 Oracle APEX 交互式网格。当我单击按钮添加新行时，它会将行添加到列表的底部。这不方便。如果我先选择一条记录，然后单击添加行，它会在所选记录下方添加新行。

如何更改功能以便添加行将行添加到网格顶部？

【问题讨论】：

标签： oracle oracle-apex

【解决方案1】：

您没有提到您使用的 apex 版本。应该没什么区别，但是为了记录，我在 apex 20.2 中准备了我的解决方案。

您单击的“添加行”按钮最初与称为“选择添加行”的网格操作相关联。您可以通过使用浏览器的开发工具检查按钮元素来检查 - 它应该具有设置为“selection-add-row”的 data-action 属性。

可以通过 javascript 修改具有特定交互式网格上下文的操作 - 在运行时（例如动态操作）或交互式网格初始化期间（通过使用 IG 属性的高级部分中的 JavaScript 初始化代码属性）。

您至少有两种方法可以实现您的目标。首先是改变“selection-add-row”动作的行为。我建议使用以下代码作为 Javascript 初始化代码：

function(config) { 
config.initActions = function( actions ) {
  actions.remove('selection-add-row');
  actions.add({
    name: "selection-add-row",
    label: "Add row",
    iconBeforeLabel: "true",
    action: function(event, focusElement) {
      let model = $(actions.context).interactiveGrid('getCurrentView').model;
        model.insertNewRecord();
    }
  });
}
return config;}

它会删除该操作并添加具有相同名称的新操作。新操作在网格顶部添加新行，而不是在选定行下方添加。这里的缺点是你失去了最初的顶点动作——但如果你不打算使用它，也不会造成任何伤害。

第二种解决方案是不删除原始操作并创建具有相同但名称不同的新操作。在这种情况下，您需要以某种方式将“添加行”按钮的 data-action 属性更改为新操作的名称（或完全删除按钮，然后创建自己的按钮）。

有关操作和整个 IG 自定义的更多信息：https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/interactiveGrid.html

【讨论】：