Turbotable : p-tableHeaderCheckbox 选择禁用的行答案

【问题标题】：Turbotable : p-tableHeaderCheckbox selects disabled linesTurbotable : p-tableHeaderCheckbox 选择禁用的行
【发布时间】：2019-07-11 11:23:32
【问题描述】：

我在 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 也选择禁用行？

提前感谢您的回答

【问题讨论】：

标签： primeng-turbotable

【解决方案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 状态的过程中排除禁用行的逻辑）

【讨论】：

【解决方案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;
        }
    };
}

【讨论】：