Slickgrid：如何获取columnPicker切换显示/隐藏的列引用

安全阿岳

2026-7-24

问题

我正在使用Slickgrid的columnPicker来显示/隐藏特定列，尝试通过以下代码监听事件：

columnpicker.onColumnsChanged.subscribe((e, args) => {
   console.log("hello world");
})

但args仅返回所有可见列，我需要在特定列被显示时触发事件，请问能否获取columnPicker中被切换显示/隐藏的具体列引用？

解决方案

可以通过保存切换前的列可见状态，在onColumnsChanged事件触发时和新状态对比，找出被切换的列。具体实现步骤如下：

提前存储初始的列可见状态（建议在columnPicker初始化完成后执行）：

// 保存所有列的初始可见状态
let previousVisibleColumns = grid.getColumns().map(col => ({
  id: col.id,
  visible: col.visible
}));

在onColumnsChanged事件中对比新旧状态，定位变化的列：

columnpicker.onColumnsChanged.subscribe((e, args) => {
  // 获取当前所有列的完整配置（包含visible属性）
  const currentColumns = grid.getColumns();
  
  // 筛选出可见状态发生变化的列
  const changedColumns = currentColumns.filter(col => {
    const prevState = previousVisibleColumns.find(pCol => pCol.id === col.id);
    return prevState && prevState.visible !== col.visible;
  });

  // 针对变化的列执行对应逻辑
  changedColumns.forEach(col => {
    if (col.visible) {
      console.log(`列 ${col.id} 已被显示`);
      // 此处写入特定列显示后的触发逻辑
    } else {
      console.log(`列 ${col.id} 已被隐藏`);
    }
  });

  // 更新保存的状态，用于下一次对比
  previousVisibleColumns = currentColumns.map(col => ({
    id: col.id,
    visible: col.visible
  }));
});

注意事项：