Angular Slickgrid |如何动态禁用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演示

Answer 1

我不确定你是否可以切换复选框列而不删除它(也许与grid.setColumns()但它可能是更好的只是使用selectableOverride回调。它将允许你动态地改变它的可用性，在你的情况下，只是使用你的布尔标志，让回调返回真或假(后者将禁用/删除所有复选框)

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……但我可能不会这样做，它更容易保持一个方法与不同的逻辑在里面(如validateRowSelection前面所示)