时间戳

首页 > 解决方案 > 在 PrimeNG p-table 中单击取消按钮后如何保留复选框的选择？

angular - 在 PrimeNG p-table 中单击取消按钮后如何保留复选框的选择？

问题描述

我使用下面的代码来显示带有确定和取消按钮的对话框，同时取消选择 PrimeNG p-table 中的复选框。如果有人试图取消取消选中复选框，那么我需要保留复选框的选择。

<p-table [value]="data" [scrollable]="true" scrollHeight="400px" frozenWidth="450px"
  dataKey="id" [(selection)]="chkBoxSelectedFARow" editMode="row" 
  [first]="first" [totalRecords]="totalRecordsCount" [rows]="20" selectionMode="multiple"
  [lazy]="true" (onPage)="loadpaginator($event)"
  autoLayout="true" sortMode="single" (onRowSelect)="onRowEditSelect($event)" (onHeaderCheckboxToggle)="rowChangeGrid($event)"
  [customSort]="true" (onRowUnselect)="onRowEditUnselect($event)">
<ng-template pTemplate="header">
  <tr>
    <th><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>
    <th>Id</th>
    <th>Number</th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-rowIndex="rowIndex">
  <tr [pSelectableRow]="data" [pSelectableRowIndex]="rowIndex">
    <td><p-tableCheckbox #chkRowData [value]="data" [index]="rowIndex"></p-tableCheckbox></td>
    <td>{{data.id}}</td>
    <td>{{data.number}}</td>
  </tr>
</ng-template>
</p-table>

单击对话框中的取消按钮后如何保留复选框的选择？

Stackblitz 演示

标签： angularprimengprimeng-turbotable

解决方案

每次取消选择一行时，将其id存储在缓冲区变量中。然后，当您取消操作时，只需将相应的对象放回您的选择。

  onRowEditUnselect($event) {
    this.lastUnselectedCheckbox = $event.data.id; // stock last unchecked item
    this.unCheckDisplayDialog = true;
  }


  cancelRow() {
    let checkboxToAdd = this.data.filter(
      item => item.id === this.lastUnselectedCheckbox
    )[0]; // search corresponding object
    checkboxToAdd.status = true;
    this.selection.push(checkboxToAdd); // put it back to selection
    this.selection = [...this.selection];
    this.unCheckDisplayDialog = false;
  }

见Stackblitz

推荐阅读