Angular Slickgrid 如何动态禁用checkboxSelector的selectableOverride行选功能

DevOps 小满

2026-10-6

实现方案

现有代码问题

直接在selectableOverride中返回false会禁用所有行的选择功能，不符合仅禁用已选中行的需求
调用setOptions更新配置后未触发行重绘，界面不会立刻更新禁用状态

正确实现步骤

点击禁用按钮时先获取当前已选中的行数据标识，在selectableOverride回调中对每行做判断：已选中的行返回false（不可选），未选中的行返回true（保持可选）
更新配置后调用invalidateAllRows方法重绘所有行，让禁用状态立刻生效

完整代码示例

// 存储已选中行的唯一标识集合，假设你的行数据用id作为唯一键
selectedRowIds = new Set<number>();

disableButtonClick() {
  // 第一步：获取当前已选中的所有行数据，收集唯一标识
  const selectedItems = this.gridObj.getSelectedRows();
  selectedItems.forEach(item => this.selectedRowIds.add(item.id));

  // 第二步：更新grid配置
  this.gridObj.setOptions({
    checkboxSelector: {
      selectableOverride: (row: number, dataContext: any, grid: any) => {
        // 已选中的行返回false，禁用选择/取消操作
        return !this.selectedRowIds.has(dataContext.id);
      }
    }
  });

  // 第三步：重绘所有行，立刻更新复选框禁用状态
  this.gridObj.invalidateAllRows();
}

// 如果需要恢复所有行可选，调用以下方法即可
enableAllRows() {
  this.selectedRowIds.clear();
  this.gridObj.setOptions({
    checkboxSelector: {
      selectableOverride: null
    }
  });
  this.gridObj.invalidateAllRows();
}