При подкачке страниц с данными Primeng теряется выбор при подкачке на стороне сервера

<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, чтобы увидеть содержимое массива выбора, я понимаю, почему, потому что я вижу, что он содержит только выборки со второй страницы и никакие ключи строк на этой первой странице не совпадают.

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

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


angular primeng primeng-datatable
person ua_boaz    schedule 30.08.2018    source источник
comment
Вы можете добиться этого, сохранив свой выбор в состоянии. Если вы добавите NgRx в свой проект angular. Затем передайте действие, когда выбор сделан, и как только выбор будет сделан, он будет сохранен в store. Когда вы вернетесь на другую страницу, состояние будет восстановлено. Но это самый надежный способ для сложных проектов.   -  person Ragavan Rajan    schedule 31.08.2018
comment
есть какой-нибудь пример?   -  person ua_boaz    schedule 31.08.2018
comment
logisticinfotech.com/blog/ - вы можете попробовать этот пример. Но в любом случае я добавил угловой способ ниже   -  person Ragavan Rajan    schedule 31.08.2018
comment
Рад помочь вам !!   -  person Ragavan Rajan    schedule 31.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

Просто чтобы увеличить флажок.

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

person Ragavan Rajan    schedule 30.08.2018