Выберите все строки по нажатию кнопки - PullRequest
Новая
       25

Выберите все строки по нажатию кнопки

1 голос
/ 24 января 2020

У меня есть таблица primeng. Когда я нажимаю кнопку, я хочу, чтобы были выбраны все строки.

html: 

<p-table [columns]="columns" [value]="values"
         selectionMode="multiple" [(selection)]="selectedValues"
         (onRowSelect)=selectRow(selectedValues)
         (onRowUnselect)="unselectRow($event)" #table>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-val>
    <tr [pSelectableRow]="val">
      <td *ngFor="let col of columns">
        {{val[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

<div class="table-button">
  <p-button (onClick)="selectAll()">Select All</p-button>
  <p-button>Remove</p-button>
</div>

машинопись: 

import {Component, OnInit, ViewChild} from '@angular/core';
import {Model} from "../../models/model.model";

@Component({
  selector: 'app-comp',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
  @ViewChild('table', {static: false}) table;

  //left out for now
  //values: Model[];

  columns: any[];

  selectedValues: Model[] = [];

  constructor() { }

  ngOnInit() {
    this.columns = [
      { field: 'Id', header: 'ID' },
      { field: 'startTime', header: 'Start Time' },
      { field: 'endTime', header: 'End Time' },
      { field: 'description', header: 'Description' },
      { field: 'insertUser', header: 'Create User' },
      { field: 'insertTime', header: 'Create Eastern Time' },
    ]
  }

  selectRow(event){
    console.log("selected row!");
  }

  unselectRow(event){
    console.log("unselected a row!")
  }

  selectAll(){
    console.log("select all is clicked");
    for (var i = 0; i < this.values.length; i++){
      this.selectedValues[i] = this.values[i];
    }
    console.log(this.table);
  }

}

Когда я нажимаю кнопку и проверьте консоль, чтобы увидеть значение _selection, я вижу, что выбрана вся таблица. Это потому, что у меня есть для l oop добавление массива данных в массив выбора таблиц. После этого, если я щелкаю по какой-либо строке, строка, по которой щелкнули, отображается как не щелкнувшая (не выделенная), а все остальные строки отображаются как нажатые (выделенная). Исходя из этого, кажется, что мой метод выбора всех строк работает отдельно от выделения.

Итак, мои вопросы:

Есть ли лучший способ, менее "хакерский" способ выбора все строки и показать, что они выделены (выделены) вместо этого, используя для l oop, чтобы добавить их в мой массив выбора?

Если этот метод является наиболее логичным способом выбрать все строки, как я могу представить все строки, выбранные (выделенные), когда я нажимаю кнопку?

1 Ответ

1 голос
/ 24 января 2020

primeng table проверяет, находится ли строка Item внутри списка (selectedValues), и база этого добавит класс, чтобы выделить выбранную строку, чтобы сделать это, просто установите элемент данных в списке так, как это сделает this.selectedValues = [...this.values]; работа, если вы используете флажок для выбора строки, вы можете использовать этот компонент <p-tableHeaderCheckbox></p-tableHeaderCheckbox>, но он делает то же самое logi c

`

  selectAll(){
    this.selectedValues = [...this.dataSet];
  }

демо ?

...