在 angular slickgrid 中，从另一个页面路由或更改网格数据时 enablecheckboxselector:true 不起作用

Question

我有一个下拉列表，在更改下拉列表中的值时，我正在使用新数据加载网格并调用 setGridOptions() 再次设置所有网格选项。我有 enablecheckboxselector:true 但复选框也没有出现。 令人惊讶的是，只要我单击任何列对其进行排序，就会显示复选框。任何人都可以请提出一个解决方案。谢谢！

Answer 1

答案与您提出的另一个 SO 问题 here 大致相同。所以这似乎是重复的，答案是

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.gridObj = angularGrid.slickGrid;
}

changeGridOptions() {
  const isReadyOnly = false; // whatever your code logic is here...
  this.angularGrid.slickGrid.setOptions({ enableCheckboxSelector: isReadyOnly });
  if (isReadOnly) {
    // you also need to remove the column from your column definitions
    // you can do that by using slice which will also trigger a dirty change to refresh the grid
    this.columnDefinitions = this.columnDefinitions.slice(1); // return all columns without first one (without index 0)
  }
}

如果这不起作用，您可以尝试我昨天在类似问题here 中回答的其他解决方案，这部分来自答案（如果您动态添加/删除复选框列，这可能对您有用，它写在代码注释和完整的解释，然后阅读其他 SO here)

  dynamicallyAddTitleHeader() {
    //... add your new column

    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
    const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
    allColumns.push(newCol);
    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
  }

基本上 Angular-Slickgrid 保留了列定义及其位置的内部引用，如果您直接使用 grid.setOptions 您有点绕过 Angular-Slickgrid 并且它不知道列定义更改，您可以强制与此答案中编写的 2 条建议代码同步。您必须知道并记住的是，Angular-Slickgrid 是 SlickGrid 之上的一个包装器，如果您直接与 SlickGrid 对话，那么在某些情况下（例如这种情况），Angular-Slickgrid 不会意识到这种变化。

SlickGrid 中还有一个事件onSetOptions 可能用于重新同步列定义，但我不确定我是否要将其直接放入库中，在您的网格中使用它应该是安全的但我不确定直接在库中的后果（我可能不想在每种网格选项更改时重新加载列），可能是这样的（未经测试）

<angular-slickgrid 
     gridId="grid"
     [columnDefinitions]="columnDefinitions" 
     [gridOptions]="gridOptions" 
     [dataset]="dataset"
     (onAngularGridCreated)="angularGridReady($event)"
     (sgOnSetOptions)="handleOnSetOptions($event.detail.eventData, $event.detail.args)"
</angular-slickgrid>

handleOnSetOptions(e, args) {
  const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
  
  // (or use slice) reassign to column definitions for Angular to do dirty checking
  this.columnDefinitions = [...allColumns]; 
}