Как выбрать и отменить выбор строк в угловых 6 - PullRequest
Новая
       38

Как выбрать и отменить выбор строк в угловых 6

0 голосов
/ 18 марта 2019

Я хочу получить значения из выбранных строк и сохранить их в массиве.И когда я отменяю выбор строки, я хочу удалить ее из массива результатов.Но согласно моему коду, сколько раз я нажимал на строку, сколько раз fileName из значений строк добавлялось в мой массив результатов (selectedRows).Мой код:

HTML: 

<ag-grid-angular #grid
      style="width : 603px; height:250px;" class="ag-theme-balham"
      [rowData]="searchResults" [columnDefs]="columnDefs" [rowSelection]="selectionMode"
      [rowMultiSelectWithClick] = true
      (rowClicked)="onRowClicked($event)"
    >
    </ag-grid-angular>

component.ts: 

    export class ShowFilesComponent implements OnInit {
            searchResults : Array<String>;
            private seletectedRows :Array<String>;

            columnDefs  = [
                {headerName:"S No", valueGetter: (args) => this.getIndexValue(),checkboxSelection : true,headerCheckboxSelection: true,
                headerCheckboxSelectionFilteredOnly: true,cellRenderer: 'selectedClient'}, 
                {headerName : 'File Name', field:'fileName', sortable:true},
                {headerName : 'word count', field:'wordCount', sortable:true}
              ]
            constructor(private http: HttpClient,private r : Router, private s : FileListService) {
                this.http.get(this.path).subscribe(
                  (data: any) => {
                    this.searchResults = data;
                    console.log(this.searchResults);
                  },
                  error => console.log(error)
                );

               }
            }
            ngOnInit() {}
             onRowClicked(event){
            this.seletectedRows.push(event.node.data.fileName);

                console.log(this.seletectedRows);
}
        }

Ответы [ 3 ]

0 голосов
/ 18 марта 2019

Зарегистрируйте обработчик selectionChanged в сетке, и в вашем обработчике используйте метод grid * api getSelectedNodes(). 

<ag-grid-angular #grid
      [rowData]="searchResults" [columnDefs]="columnDefs" [rowSelection]="selectionMode"
      [rowMultiSelectWithClick]=true
      (selectionChanged)="onSelectionChanged($event)" >
</ag-grid-angular>

Объект события будет иметь ссылку на API сетки, который можно использовать для получения выбранных строк ... 

onSelectionChanged(event: AgGridEvent) {
  const nodes = event.api.getSelectedNodes();
  // now do something with them....
}

Обратите внимание, что вам не нужно хранить узлы в массиве самостоятельно - просто используйте копию ag-grid, которая будет обновляться для вас, тогда вы можете просто использовать Array.map (), чтобы получить массив все, что вы хотите от данных узла.

0 голосов
/ 18 марта 2019

Чтобы прослушать selection/de-selection строки, вам необходимо зарегистрироваться на событие onRowSelected.

ниже приведен пример кода с форума ag-grid-angular, вы можете построить свою логику сверхуэтого (ниже данные только для демонстрации)

Угловой код: 

var gridOptions = {
  columnDefs: columnDefs,
  rowSelection: 'multiple', // to enable multiple row selection by click
  rowMultiSelectWithClick: true,
  rowData: null,
  onRowSelected: onRowSelected // register to rowSelection event
};

function onRowSelected(event) {
     alert("row " + event.node.data.athlete + " selected = " + event.node.selected); // only for debugging purpose
     if(event.node.selected) {
         this.seletectedRows.push(event.node.data.athlete);
     } else {
       const index = this.seletectedRows.indexOf(event.node.data.athlete);
       if(index != -1) {
          this.seletectedRows.splice(index, 1);
       }
     }
}

Рабочий пример на plunkr

0 голосов
/ 18 марта 2019

Используйте Array.prototype.push метод, подобный этому: 

onRowClicked(event){
    let temp = 0;
    this.seletectedRows.push(event.node.data.fileName);
    console.log(this.seletectedRows);
}

и при отмене выбора используйте метод сращивания . Я уверен, что в вашем компоненте table / grid есть событие отмены выбора, которое вы можете использовать для реализации удаления элемента из массива.

...