Turbotable ：p-tableHeaderCheckbox 选择禁用的行

Question

我在 PrimeNG TurboTable 上遇到问题。

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

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

如果我 select 一个禁用的行它不会激活并且不能被 selected，这非常有效，但是当我点击 p-tableHeaderCheckbox 时所有的行都是 select甚至禁用了行。

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

如何防止 tableHeaderCheckbox 也 select 禁用行？

提前感谢您的回答

Answer 1

您可以在 table 的 (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;
        }
    };
}

Turbotable ：p-tableHeaderCheckbox 选择禁用的行

Turbotable : p-tableHeaderCheckbox selects disabled lines

primeng-turbotable