primeng数据表分页在服务器端分页上丢失选择

Question

<p-dataTable #dt [value]="tabListItem" [rowStyleMap]="styleMap" [responsive]="true" (onLazyLoad)="paginate($event)" [headerCheckboxToggleAllPages]="false"
  [resizableColumns]="false" [rows]="numberOfRows" [pageLinks]="pageLinks" [paginator]="false" [sortOrder]="1" selectionMode="'multiple'" (onRowUnselect)="handleRowUnSelect($event)"
  [(selection)]="selectedRows" (onPage)="paginate($event)" [lazy]="true" [totalRecords]="totalListCount" (onRowSelect)="handleRowSelect($event)" [rowStyleClass]="lookupRowStyleClass">
  <p-column field="" header="" [style]="{'width':'3%'}" [styleClass]="'text-center'" selectionMode="multiple">
      <p-checkbox name="groupname" binary="true" (onChange)="selectRow($event,this,car)">
      </p-checkbox>
      <input type="checkbox" class="check-box" [ngModel]="checkboxValue" (ngModelChange)="selectRow($event,this,car)">
  </p-column>
  <p-column *ngFor="let data of tableHeaders" field="{{data.fieldNam}}" [sortable]="false" header="{{data.header}}" [style]="{'width':data.style.width}">

    <ng-template let-col let-dep="rowData" pTemplate="body">
      <span title="{{dep[data.fieldNam]}}">{{dep[data.fieldNam]}}</span>
    </ng-template>
  </p-column>


</p-dataTable>

我的延迟加载dataTable似乎与复选框完美匹配，可进行多项选择。当我点击另一个页面时，它完全按照我的想法传递数组中的选定行，并且我有一个正确的数组，用于保存bean中的那些选择。然后，我可以单击该页面上的更多复选框，并选择其他行，没有任何问题。

这是我的问题所在：当我回到上一页并显示时，我希望看到我选择的行仍然被选中并突出显示，但它们不是。当我查看selectedRows数组以查看选择数组的内容时，我理解为什么，因为我看到它只保存第二页的选择，并且第一页上没有行键匹配。

在我看来（假设我正在做的一切正确），选择多个只传递当前显示的数据页面上的行的选定行，然后它呈现新的数据页面 - 并且没有任何显示为选中，因为仅选择数组包含与当前显示的数据不匹配的行。

如何解决这个问题

Answer 1

您需要在<p-column> p-column标记中启用多个选择模式

在html文件中进行多项选择：

seletionMode="multiple"

并且（onRowSelect）应该设置为onRowSelect（$ event）方法。

<p-dataTable #dt [value]="allTimesheetData" class="ui-g-12" sortField="startTime" sortOrder="1"
emptyMessage="No time entries found" [reorderableColumns]="true" columnResizeMode="fit" [resizableColumns]="true"
[globalFilter]="tableSearch" exportFilename="users" [editable]="true" 
(onEditComplete)="onEditComplete($event)" [(selection)]="selectedRows" 
(onRowSelect)="onRowSelect($event)">
<!-- Adding checkboxes to the datatable with selectionmode set to multiple check the css class selectBoxColumn-->
<p-column selectionMode="multiple" styleClass="selectBoxColumn"></p-column>

在你的ts文件中：

export class DataTableComponent implements OnInit {
//for checkbox selection
selectedRows: Array<any>;
// trivial onRowSelect which just logs out the JSON 
onRowSelect(rowInfo) {
console.log(JSON.stringify(rowInfo.data)); // or this.selectedRow
}

在CSS文件中：将css设置为以下

/* For checkbox selection */
p-dataTable>>>.selectBoxColumn {
width: 43px;
}

只是为了使复选框更大。

希望能帮助到你。