primeng-turbotable - Turbotable : p-tableHeaderCheckbox 选择禁用的行

Question

我在 PrimeNG TurboTable 上遇到问题。

我从以下示例开始：https ://www.primefaces.org/primeng/#/table/selection ，尤其是从复选框选择示例开始。

唯一的区别是在一些 p-tableCheckbox 我添加了[disabled]="true"

如果我选择一条禁用的行，它不会激活并且无法选择，这非常有效，但是当我单击 p-tableHeaderCheckbox 时，所有行都被选中，即使是禁用的行。

此外，选择还计算状态禁用的行，或者它应该只考虑没有状态禁用的行我在 stackblitz 上做了一个例子：https ://stackblitz.com/edit/angular-gnbsml?file=src%2Fapp%2Fapp .component.html

如何防止 tableHeaderCheckbox 也选择禁​​用行？

预先感谢您的回答

Answer 1

您可以防止在表上的 (selectionChange) 回调中进行选择。将 [(selection)] 拆分为两部分：

[selection]="selectedRowData" (selectionChange)="onSelectionChange($event)"

向组件添加 onSelectionChange 方法：

  onSelectionChange(selection: any[]) {
    for (let i = selection.length - 1; i >= 0; i--) {
      let data = selection[i];
      if (this.isRowDisabled(data)) {
        selection.splice(i, 1);
      }
    }
    this.selectedRowData = selection;
 }

还要添加 isRowDisabled 方法：

  isRowDisabled(data: any): boolean {
    return data.color === 'orange'
  }

并将 tableCheckbox 的模板更改为使用 isRowDisabled （仅用于在一个地方检查）

<p-tableCheckbox [value]="rowData" [disabled]="isRowDisabled(rowData)"></p-tableCheckbox>

请参阅https://stackblitz.com/edit/angular-hnzxs2上的示例（我还添加了逻辑以从计算 headerCheckBox 状态的过程中排除禁用的行）

Answer 2

当我们在过滤器后只禁用行时，它会失败。我通过检查活动行来修复它。

ngAfterViewInit(): void {
    const orig_updateCheckedState = this._headerCheckBox.updateCheckedState;
    const me = this;
    this._headerCheckBox.updateCheckedState = function() {
        const cars: any[] = me._table.filteredValue || me._table.value;
        const selection: any[] = me._table.selection;
        let actRows: boolean = false;
        for (const car of cars) {
            if (!me.isRowDisabled(car)) {
                actRows = true;
                const selected = selection && selection.indexOf(car) >= 0;
                if (!selected) return false;
            }
        }
        if (actRows) {
            return true
        } else {
            return false;
        }
    };
}