Angular 光滑网格 |如何动态禁用selectableOverride的checkboxSelector的行选择

Question

想要在单击一些按钮后通过更新 gridOptions 来禁用选定的行项目。

initGridOptions() {
   this.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enablePagination: true,
      enableAutoResize: true,
      autoResize: {
        containerId: 'grid-wrapper',
        sidePadding: 5
      },
      alwaysShowVerticalScroll: false,
      enableCheckboxSelector: true,
      enableRowSelection: true,
      checkboxSelector: {
          hideInFilterHeaderRow: false,
          hideInColumnTitleRow: true,
      },
      rowSelectionOptions: {
          // True (Single Selection), False (Multiple Selections)
          selectActiveRow: false
      }
   }
}

//prepareGrid() { ...... }

disableButtonClick() {
    this.gridObj.setOptions({
        checkboxSelector: {
            selectableOverride: (row: number, dataContext: any, grid: any) => {
               // validate each row and disable the selected rows
               return false;
            }
        }
    });
}

Stackblitz Demo

Answer 1

我不确定你是否可以在不删除它的情况下切换复选框列（也许使用 grid.setColumns() 但最好只使用 selectableOverride 回调。它将允许你动态更改它的即时可用性（参见Wiki），在你的情况下，只需使用你的布尔标志让回调return为真或假（后者将disable/remove所有复选框）

export class Example1 implements OnInit {
  prepareGrid() {
    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,
      },
    };
  }
}

根据新评论和 stachblitz，您只需要一个通用方法，在该方法中，您可以根据在外部单击的按钮执行不同的逻辑。例如，如果我从您的演示中获取一些代码，让我们使用一个新标志 showOnlyOddRows = false 并假设当您单击外部按钮时它将将该标志变为 true，正如我们所期望的那样重新渲染网格，只显示奇数行的行选择

export class AppComponent implements OnInit {
  showOnlyOddRows = true;

  ngOnInit(): void {
    this.gridOptions = {
      checkboxSelector: {
        hideInFilterHeaderRow: true,
        hideInColumnTitleRow: false,
        selectableOverride: this.validateRowSelection.bind(this)
        // or
        // selectableOverride: (row: number, dataContext: any) => this.validateRowSelection(row, dataContext),
      },
      // ...
    };
  }

  validateRowSelection(row: number, dataContext: any, grid: any) {
    return this.showOnlyOddRows ? dataContext.id % 2 === 1 : true; // returning true means that we want to show the row selection
  }

  // change flag when external button is clicked and re-render grid with new row selection set
  disableOddRows() {
    this.showOnlyOddRows = true;
    this.gridObj.invalidate(); // this will re-execute the validateRowSelection method
  }

所以再说一次，不要用 setOptions 更改覆盖，它会完全破坏代码，所以不要那样做。如果你真的需要改变插件的选项，你应该使用插件 setOptions 而不是 grid.setOptions。像 this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.checkboxSelector).setOptions({ /* ... */ }) 或 this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.checkboxSelector).selectableOverride = newOverrideFn 之类的东西......但我可能不会那样做，只保留 1 个具有不同逻辑的方法更容易（如前面显示的 validateRowSelection）

Angular 光滑网格 |如何动态禁用selectableOverride的checkboxSelector的行选择

Angular Slickgrid | How to disable the row selection of checkboxSelector of selectableOverride dynamically

javascript

slickgrid

angular-slickgrid