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列标记

中启用多个选择模式

您的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;
}

只是使复选框更大。

希望有帮助。

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

1 个答案: