p-tablecheckbox и p-tableheadercheckbox - PullRequest
Новая
       5

p-tablecheckbox и p-tableheadercheckbox

1 голос
/ 04 марта 2020

У меня есть таблица с заголовком флажка, и при проверке флажка нужно проверять только несколько строк на основе условия, а при снятии флажка выбранные флажки должны исчезнуть.

HTML

<p-table [value]="_rows" [columns]="columns" [(selection)]="selectedRows">
    <p-tableHeaderCheckbox id="selectAllRows" (click)="selectRow()"></p-tableHeaderCheckbox>
    <p-tableCheckbox [value]="row" (click)="selectRow()" [disabled]="row.userDefined==='N'">
        </p-tableCheckbox
></p-table>

JS

selectRow() {
    this.selectedRows = this.selectedRows.filter(value => value.flag === 'Y');
    this.selectedEvent.emit(this.selectedRows);
}

1 Ответ

0 голосов
/ 05 марта 2020

p-tableheadercheckbox компонент имеет одну логику c, чтобы установить все строки на selectedRows, тогда это означает, что все элементы выбраны, вы можете проверить это логи c здесь

Вы можете использовать p-checkbox a bind selectRow, чтобы щелкнуть по событию, который будет выполнять желаемую работу

компонент 

  selectRow(checkValue) {
    if (checkValue) {
      this.selectedRows = this.cars.filter(value => value.year < 2000);
    } else {
      this.selectedRows = [];
    }
  }

шаблон 

<p-table [value]="cars" [columns]="cols" [(selection)]="selectedRows">
    <ng-template pTemplate="header" let-columns>
        <tr>
      <th>
        <p-checkbox (click)="selectRow(e.checked)" #e></p-checkbox>
      </th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
      <td>
            <p-tableCheckbox [value]="rowData" [disabled]="rowData.year > 2000">
        </p-tableCheckbox>

      </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>

        </tr>
    </ng-template>
</p-table>

демо ??

...