页面加载时隐藏Interactive Grid列报错问题求助

错误原因 #

报错Uncaught Error: cannot call methods on stickyWidget prior to initialization; attempted to call method 'refresh'的核心原因是：调用hideColumn时，Interactive Grid（IG）的stickyWidget组件（负责表头固定等功能）尚未完成初始化，而hideColumn操作会触发IG的refresh，进而调用了未就绪的组件。

通用修复方案 #

1. 确保IG完全就绪后再执行操作 #

使用APEX官方提供的异步等待机制，确保IG的grid视图初始化完成后再调用列操作API。推荐两种方式：

方式一：利用IG视图的Promise回调

修改renameColumnHeaders函数，通过then方法等待grid视图就绪：

function renameColumnHeaders() {
  var $wrapperDiv = $(this);
  var $item = $wrapperDiv.find('.apex-item-checkbox');
  var $checkboxes = $item.find('input[type="checkbox"]');
  var selectedParts = $checkboxes.filter(function() {
    return this.checked === true;
  });

  // 异步等待IG grid视图就绪
  apex.region("ig-static-id").widget().interactiveGrid("getViews").grid.then(function(gridView) {
    // 隐藏多余列
    for (let i = selectedParts.length; i < 10; i++) {
      gridView.hideColumn("PART_" + (i + 1));
    }

    // 用IG API修改列标题（比DOM操作更可靠）
    for (let i = 0; i < selectedParts.length; i++) {
      var targetColumn = gridView.getColumn("PART_" + (i + 1));
      if (targetColumn) {
        targetColumn.headerText = selectedParts[i].ariaLabel.trim();
        gridView.refresh(); // 刷新视图生效
      }
    }
  });
}

方式二：使用apex.widget.waitFor轮询检查就绪状态

如果需要兼容旧版APEX，可使用轮询方式等待IG就绪：

function renameColumnHeaders() {
  var $wrapperDiv = $(this);
  var $item = $wrapperDiv.find('.apex-item-checkbox');
  var $checkboxes = $item.find('input[type="checkbox"]');
  var selectedParts = $checkboxes.filter(function() {
    return this.checked === true;
  });

  // 轮询检查IG是否就绪
  apex.widget.waitFor(
    function() {
      var igInstance = apex.region("ig-static-id").widget().interactiveGrid();
      // 验证IG实例及grid视图是否就绪
      return igInstance && igInstance.getViews().grid && igInstance.getViews().grid.isReady;
    },
    function() {
      var gridView = apex.region("ig-static-id").widget().interactiveGrid("getViews").grid;
      // 隐藏列
      for (let i = selectedParts.length; i < 10; i++) {
        gridView.hideColumn("PART_" + (i + 1));
      }
      // 修改列标题
      for (let i = 0; i < selectedParts.length; i++) {
        var targetColumn = gridView.getColumn("PART_" + (i + 1));
        if (targetColumn) {
          targetColumn.headerText = selectedParts[i].ariaLabel.trim();
          gridView.refresh();
        }
      }
    },
    100,  // 每100毫秒检查一次
    5000  // 5秒超时，避免无限等待
  );
}

2. 调整页面加载时的调用逻辑 #

不要在页面加载时直接执行函数，改为监听IG的interactivegridviewready事件，确保IG初始化完成后再触发：

// 页面加载时绑定IG就绪事件
$(document).ready(function() {
  $("#ig-static-id").on("interactivegridviewready", function() {
    $('.toggle-part-cb').each(renameColumnHeaders);
  });
});

3. 针对复选框变更场景的优化 #

如果需要在复选框状态变更时触发操作，直接调用renameColumnHeaders即可，因为函数内部已经包含了IG就绪检查：

// 给复选框绑定变更事件
$('.toggle-part-cb input[type="checkbox"]').on('change', function() {
  $(this).closest('.toggle-part-cb').each(renameColumnHeaders);
});

关键注意事项 #

• 替换代码中的ig-static-id为你实际的Interactive Grid静态ID
• 使用IG API修改列标题（targetColumn.headerText）比直接操作DOM更稳定，避免APEX版本更新导致DOM结构变化
• 超时时间可根据实际页面加载速度调整

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