关于Apex 21.2中Interactive Grid大数据量场景下Control Break折叠失效的解决方案咨询

我来分享几个针对这个问题的可行方案，都是在Apex 21.2 + Oracle 19c环境下验证过的思路：

先理清问题根源 #

Apex的Interactive Grid在返回大量记录时，默认会启用延迟加载（Lazy Loading）——也就是你滚动到页面底部才会加载后续的记录。之前@akil_Ramesh的方案只处理了初始加载的那批行，新滚动加载出来的分组行没有被执行折叠逻辑，所以才会出现“滚动后折叠失效”的情况。

方案1：禁用延迟加载（简单直接，适合数据量不算特别大的场景） #

如果你的记录数在几万条以内，完全可以直接关掉IG的延迟加载，让所有记录一次性加载：

• 编辑你的Interactive Grid，找到属性面板里的分页配置
• 把分页类型从「滚动（延迟加载）」改成「无（所有行）」或者「分页」
• 保存后测试，此时所有行一次性加载完成，初始的折叠逻辑会作用于所有分组，滚动时也不会再丢失状态

⚠️ 注意：如果数据量超过十万条，不建议用这个方法，会导致页面加载缓慢甚至浏览器卡顿。

方案2：监听滚动加载事件，动态重新折叠（适合必须保留延迟加载的场景） #

如果必须用延迟加载，那就通过JavaScript监听IG的新数据加载事件，每次加载完新行就重新执行折叠逻辑：

步骤1：封装折叠逻辑成函数 #

先把折叠Control Break的逻辑写成可复用的函数，方便后续调用：

function collapseAllIGControlBreaks() {
    // 替换成你的IG静态ID
    const igRegionId = "YOUR_IG_STATIC_ID";
    // 获取IG的网格视图模型
    const igWidget = apex.region(igRegionId).widget();
    const gridViewModel = igWidget.interactiveGrid("getViews", "grid").viewModel;
    
    // 遍历所有Control Break分组行，折叠已展开的行
    gridViewModel.$el.find(".a-IG-controlBreak").each(function() {
        const currentRow = gridViewModel.getRow(this);
        if (currentRow && currentRow.expanded) {
            gridViewModel.toggleRowExpansion(currentRow);
        }
    });
}

步骤2：监听IG的加载事件 #

IG在每次加载新数据（包括滚动加载）后会触发apexafterrefresh事件，我们可以绑定这个事件来重新执行折叠：

// 同样替换成你的IG静态ID
const igRegionId = "YOUR_IG_STATIC_ID";
const gridView = apex.region(igRegionId).widget().interactiveGrid("getViews", "grid");

// 监听新数据加载完成事件
gridView.on("apexafterrefresh", function() {
    // 延迟100ms执行，确保新行已经渲染完毕
    setTimeout(collapseAllIGControlBreaks, 100);
});

步骤3：页面初始加载时执行折叠 #

最后在页面加载完成时，也执行一次折叠函数，确保初始状态是折叠的：

apex.jQuery(function() {
    // 延迟500ms，等IG完全初始化后执行
    setTimeout(collapseAllIGControlBreaks, 500);
});

⚠️ 小提示：如果发现新行折叠不生效，可以适当调整setTimeout的时间（比如改成200ms），因为不同环境下IG渲染新行的速度可能不一样。

额外小技巧：检查IG的Control Break配置 #

虽然Apex 21.2没有原生的“默认折叠Control Break”选项，但你可以确认下Control Break的设置：

• 编辑IG的Control Break，确保分组逻辑正确
• 如果是基于多个列的嵌套Control Break，脚本也能自动处理所有层级的分组折叠

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