пейджинговая передача данных с данными primeng теряет выборку на стороне сервера - PullRequest
Новая
       8

пейджинговая передача данных с данными primeng теряет выборку на стороне сервера

0 голосов
/ 30 августа 2018 
<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>

Моя лениво загруженная таблица данных, кажется, прекрасно работает с флажками для нескольких вариантов выбора. Когда я нажимаю на другую страницу, она доставляет выбранные строки в массиве точно так, как я думаю, и у меня есть правильный массив, содержащий эти выборки в бине. Затем я могу нажать на дополнительные флажки на этой странице и выбрать дополнительные строки без проблем.

Вот мой вопрос: когда я возвращаюсь на предыдущую страницу, и она отображается, я ожидал увидеть строки, которые я выбрал для ЕЩЕ, будут выделены и выделены, но это не так. Когда я смотрю в массив selectedRows, чтобы увидеть содержимое массива выбора, я понимаю, почему, потому что я вижу, что он содержит только выборки со 2-й страницы и никакие ключи строк на этой первой странице не совпадают.

Мне кажется (при условии, что я все делаю правильно), что выбор нескольких значений доставляет только выбранные строки для строк на отображаемой в данный момент странице данных, а затем он отображает новую страницу данных - и ничто не отображается как выбранное, потому что массив выбора содержит только строки, которые не соответствуют текущим отображаемым данным.

Как это можно исправить

1 Ответ

0 голосов
/ 31 августа 2018

Вам нужно включить режим выбора для нескольких значений в <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;
}

Просто чтобы сделать флажок больше.

Надеюсь, это поможет.

...