Флажок SelectAll в заголовке должен быть снят при переходе на следующую страницу при использовании p-tableHeaderCheckbox и p-table - PullRequest
Новая
       27

Флажок SelectAll в заголовке должен быть снят при переходе на следующую страницу при использовании p-tableHeaderCheckbox и p-table

3 голосов
/ 07 мая 2020

Я использую <p-table>, в котором есть <p-tableHeaderCheckbox></p-tableHeaderCheckbox>, чтобы установить и снять флажок. Все работает нормально, но когда я перехожу на следующую страницу в таблице, все не отмечено, но опция selectAll по-прежнему отмечена. Как снять галочку с заголовка. 

<p-table #dtGrid [columns]="staticColumns" [value]="serviceIdData" 
    [styleClass]="'table'" scrollHeight="{{scrollHeight}}" [rows]="10" 
    [paginator]="true" (onRowSelect)="onRowSelect($event)" [pageLinks]="3" 
    (onRowUnselect)="onRowUnselect($event)" [rowsPerPageOptions]="[10,25,50,100]" 
    styleClass="table-light" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)"
    [scrollable]="true"  [lazy]="true"  [(selection)]="selectedRecords"
     (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" scrollHeight="450px"  [responsive]="true">
        <ng-template pTemplate="colgroup" let-columns>
              <colgroup>
                  <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
              </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
              <th role="columnheader" style="width:20px;">
                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </th>
                <th *ngFor="let col of columns" [pSortableColumn]="col.fieldName" (click)="placeSortIcon()">
                   <div>
                        <span pTooltip={{col.tooltip}} tooltipPosition="top" [innerHtml]="col.label" [ngClass]="'ui-column-title'"></span>
                        <span *ngIf="dtGrid.sortField === col.fieldName" class="fa" [ngClass]="{'fa-sort-desc': dtGrid.sortOrder === -1, 'fa-sort-asc': dtGrid.sortOrder === 1}"></span>
                  </div>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-columns="columns" let-data>
              <tr [pSelectableRow]="data" [pSelectableRowDisabled]="data.moved">
                <td class="rowDataStyle" style="width:20px;">
                    <span *ngIf="data.moved"><img name="loading" src="assets/images/lock.png"></span>
                    <p-tableCheckbox [value]="data" [hidden]="data.moved" [disabled]="data.moved" binary="data.selected"></p-tableCheckbox>   
                    <!-- {{data.selected}} , {{data.moved}} -->
                </td>
            <td *ngFor="let column of columns">                    
                      <span [ngClass]="'ui-cell-data'">
                         {{data[column.fieldName]}}</span>                                     
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage" let-columns>
              <tr>
                  <td [attr.colspan]="columns.length">
                      No records found
                  </td>
              </tr>
            </ng-template>
     </p-table>

Флажок по-прежнему установлен при переходе на следующую страницу, щелкните по нему, чтобы увидеть снимок экрана с выходной таблицей

...