时间戳

首页 > 解决方案 > 角滑动网格 | 如何动态禁用selectableOverride的checkboxSelector的行选择

javascript - 角滑动网格 | 如何动态禁用selectableOverride的checkboxSelector的行选择

问题描述

想要通过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 演示

标签： javascriptslickgridangular-slickgrid

解决方案

我不确定您是否可以在不删除它的情况下切换复选框列（可能使用grid.setColumns()但最好只使用selectableOverride回调。它将允许您动态更改其可用性（参见Wiki），在您的情况下只是使用您的布尔标志让回调返回 true 或 false（后者将禁用/删除所有复选框）

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，您只需要 1 个常用方法，并且在该方法中，您根据在外部单击的按钮执行不同的逻辑。例如，如果我从您的演示中获取一些代码，让我们使用一个新标志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前所示）

推荐阅读