根据 if 条件将 enableCheckboxSelector 设置为 false答案

【问题标题】：Set enableCheckboxSelector to false based on if condition根据 if 条件将 enableCheckboxSelector 设置为 false
【发布时间】：2021-03-06 00:18:59
【问题描述】：

我使用 angular slickgrid & 默认情况下，我在网格选项中将 enableCheckboxSelector 设置为 true。但是基于下拉列表中的值变化，我想隐藏所有行的复选框，所以我写了

`if(isReadOnly){
this.gridOptions.enableCheckboxSelector = false;
}
else{
this.gridOptions.enableCheckboxSelector = true;
}`

但它没有按预期工作。谁能帮我解决这个问题。谢谢。

【问题讨论】：

能否也分享一下你的html代码
<angular-slickgrid gridId="gridParentChild" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [datasetHierarchical]="datasetHierarchy" (onAngularGridCreated)="angularGridReady($event)" gridHeight="330" gridWidth="auto" (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)" (onGridStateChanged)="gridStateChanged($event)"> </angular-slickgrid> 这是特定于 Angular slickgrid 的 html 代码

标签： angular angular-slickgrid

【解决方案1】：

您误解了它的工作原理，enableCheckboxSelector 网格选项是显示（或不显示）行选择列。如果您将该选项设置为false，那么您将摆脱整个列（这根本不是您想要的）。

您需要的是selectableOverride，它显示在此Row Selection - Wiki 中。 Wiki 上有大量信息供您阅读。

this.gridOptions = {
      enableRowSelection: true,
      enableCheckboxSelector: true,
      checkboxSelector: {
        // you can override the logic for showing (or not) the expand icon
        // for example, display the expand icon only on every 2nd row
        selectableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1)
      },
      multiSelect: false,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: true,
      },
};

如果您想在事后更改网格选项，您可以通过网格（SlickGrid 网格对象）和setOptions 方法（参见SlickGrid & DataView Objects）来实现

注意：仅更改 enableCheckboxSelector 不会将其从 UI 中删除，因为行选择现在是列定义中的一列。因此，如果您首先显示然后想要删除它，您必须自己从 columnDefinitions 数组中删除它，如果您想重新添加它，那么您最好在删除之前保留该列的副本，因为Angular-Slickgrid 不会自己做。换句话说，Angular-Slickgrid 会添加行选择器列，但不会删除它，你必须自己做这部分。

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)
  }
}

您可以在Example 3 - Editors 中看到通过setOptions 更改网格选项的实时示例，通过setOptions 更新“自动提交编辑”复选框（和“自动编辑设置”单选框）

【讨论】：

但问题是“isReadonly”在初始化网格时对我不可用，只有当用户更改下拉值时 isReadonly 才会变为真&然后我只想隐藏复选框，否则我想显示复选框。
您可以稍后通过grid.setOptions({ enableCheckboxSelector: false })调用网格setOptions
angularGrid.slickGrid.setOptions({ enableCheckboxSelector: false }) 对我不起作用。它不会对网格造成任何变化
因为行选择器是一列，所以必须自己删除。我更新了答案