У меня проблема с PrimeNG TurboTable.

Я начал со следующего примера: https://www.primefaces.org/primeng/# / table / selection и, в частности, из примера выбора флажка.

Единственная разница в том, что в какой-то p-tableCheckbox я добавил [disabled] = "true"

enter image description here

Это работает очень хорошо, если я выбираю отключенную строку, она не активируется и не может быть выбрана, но когда я нажимаю на p-tableHeaderCheckbox, все строки выбираются, даже если строки отключены.

enter image description here

Кроме того, при выборе также учитываются строки с отключенным статусом или только строки с отключенным статусом. Я сделал пример на stackblitz: https: // stackblitz .com / редактировать / угловой gnbsml ? файл = ЦСИ % 2Fapp % 2Fapp.component.html

Как запретить tableHeaderCheckbox также выбирать отключенные строки?

Заранее благодарю за ответы

0
Greg-A 23 Окт 2018 в 12:42

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;
        }
    };
}
1
Collin M. Barrett 11 Июл 2019 в 03:23

Вы можете запретить выбор в обратном вызове (selectionChange) для таблицы. Разделите [(выделение)] на две части:

[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)

1
alezhu 12 Май 2019 в 09:26
52945942