TurboTable выбрать / отменить выбор программно - PullRequest
Новая
       8

TurboTable выбрать / отменить выбор программно

0 голосов
/ 27 сентября 2018

У меня есть определение TurboTable с выбором флажка, как показано ниже: 

<p-table [columns]="cols" [value]="dataJSONArray" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" dataKey="OrderId">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col style="width: 3em">
      <col *ngFor="let col of columns" [ngStyle]="{'width': col.widthPx + 'px'}">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
      <td>
        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
      </td>
...

Если я изменяю массив dtSelectedRows (выбор), ничего не происходит (массив dtSelectedRows изменяется, но проверенные столбцы не изменяются - оставайтесь проверенными -):

this.dtSelectedRows.splice(indx, 1);

Но если я назначу массив массиву dtSelectedRows, изменения вступят в силу: 

let dummySelectedRow = Object.assign([], this.dtSelectedRows);
dummySelectedRow.splice(indx, 1);
this.dtSelectedRows = dummySelectedRow;

1 Ответ

0 голосов
/ 28 сентября 2018

Вам необходимо установить свойство режима выбора равным single, в этом случае dtSelectedRows будет ссылкой на объект, а не массив выбранного значения.

<p-tableHeaderCheckbox></p-tableHeaderCheckbox> установите режим выбора наmultiple выделение, вы можете решить это, используя p-tableRadioButton (переключатель), если вы хотите поддерживать режим одиночного выделения 

<p-table  [columns]="cols" [value]="data" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" >
  <ng-template pTemplate="header">
    <tr>
      <th>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
       <td>
        <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
      </td>
      <td *ngFor="let col of cols">{{rowData[col.field]}}<td>
    </tr>
  </ng-template>
</p-table>

установить выбранный элемент методом 

  setSelectedItem(){
    this.dtSelectedRows = this.data[0];
  }

В случае, если вы хотите удалить элемент на основе условия в множественном режиме 

  removeUnvalidItem(){
    if (this.dtSelectedRows) {
      this.dtSelectedRows = this.dtSelectedRows.filter(car => car.year > 2005) 
    }
  }

демонстрация stackblitz

...