Как получить данные выбранной строки в сетке ag в angular2?

У меня есть настройка ag-grid в angular2, которая отлично работает, но я не могу получить значение выбранной строки ... В моем окне консоли нет ошибок ... Вот как я инициализирую сетку ...

import {Component} from 'angular2/core';


@Component({
selector: 'aggride',
template: `

<div class="tr-card" >
<ag-grid-ng2  #agGrid of mgrid   class="ag-fresh"   rowHeight="40px"    
               [columnDefs]="columnDefs" 
                [rowData] = "rowData"
     enableCellExpressions="true"  
 enableSorting="true"  
  unSortIcon="true"
rowSelection="single"
(getSelectedRows) = "getSelectedRows()"
(onSelectionChanged) = "onSelectionChanged()"
>
</ag-grid-ng2>
</div>
`,
directives: [(<any>window).ag.grid.AgGridNg2],
})

И это мой код внутри класса, чтобы получить выбранное значение

export class AgGride {
gridOptions = {
    columnDefs: 'columnDefs',
    rowData: 'rowData',
    rowSelection: 'single',
    getSelectedRows: 'getSelectedRows',
    onSelectionChanged: 'onSelectionChanged'
};

columnDefs = [
    { headerName: "Make", field: "make", editable: true },
    { headerName: "Model", field: "model", editable: true },
    { headerName: "Color", field: "Color", editable: true }
];

rowData = [
    { make: "Toyota", model: "Celica", Color: "Red"},
    { make: "Ford", model: "Mondeo", Color: "Blue"},
    { make: "Tata", model: "X100", Color: "Blue"},
    { make: "Volvo", model: "X5", Color: "White"},      
];

mgrid: any;
onSelectionChanged() {
    var selectedRows = this.mgrid.ag.this.gridOptions.getSelectedRows();
    console.log(selectedRows);


}
}

Кто-нибудь, скажите мне, как я могу исправить свою ошибку, чтобы я получил данные / значение выбранной строки в моем окне консоли ...


typescript angular ag-grid
person Raja Reddy    schedule 09.02.2016    source источник

Ответы (5)


arrow_upward
30
arrow_downward

В шаблоне, например:

(rowClicked)='onRowClicked($event)'
(cellClicked)='onCellClicked($event)'
(selectionChanged) = 'onSelectionChanged($event)'

а затем по классу компонента:

onRowClicked(event: any) { console.log('row', event); }
onCellClicked(event: any) { console.log('cell', event); }
onSelectionChanged(event: any) { console.log("selection", event); }

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

person zovio    schedule 09.02.2016

arrow_upward
6
arrow_downward

вы можете использовать api.getSelectedRows (), который возвращает массив данных выбранных строк.

 public getSelectedRows(){
        let rowsSelection = this.gridOptions.api.getSelectedRows();
        console.info(rowsSelection);
      }

это работа для меня.

person Anouar Mokhtari    schedule 23.10.2017

arrow_upward
4
arrow_downward

В вашем HTML привяжите событие rowClicked к вашей собственной функции следующим образом.

 <ag-grid-angular #grid
      style="width: 100%; height: 500px;" class="ag-theme-balham"
      [rowData]="rowList" [columnDefs]="columnsList" [rowSelection]="selectionMode"
      (rowClicked)="onRowClick($event)"
    >
    </ag-grid-angular>

затем на вашем TS или в вашем JS используйте api следующим образом

onRowClick(event) {
    if (this.selectionMode === 'multiple') {
      this.selectedEntity = this.grid.api.getSelectedRows();
    } else {
      this.selectedEntity = this.grid.api.getSelectedRows()[0];
    }
}

Когда ваша сетка имеет такую ​​функцию, как множественный выбор, все выбранные данные не будут передаваться с параметром event. Всегда будет только выбранная строка.

Причина, по которой я не поощрял событие selectionChanged, заключалась в том, что оно всегда будет вызывать событие rowClicked перед событием selectionChanged.

person Shashindra Sri    schedule 20.01.2019

arrow_upward
2
arrow_downward

Во-первых, выбор строки должен быть включен путем установки gridOptions.rowSelection значения "single" или "mulitple", в зависимости от поведения выбора, которое вы хотите реализовать.

Затем вы можете использовать метод API сетки getSelectedNodes(), чтобы вернуть список всех выбранных в данный момент строк в ag-Grid. Извлечь данные из каждого узла так же просто, как сопоставить каждый узел и вернуть его свойство данных.

Вот код при использовании фреймворка JavaScript:

getSelectedRowData() {
    let selectedNodes = this.gridApi.getSelectedNodes();
    let selectedData = selectedNodes.map(node => node.data);
    alert(`Selected Nodes:\n${JSON.stringify(selectedData)}`);
    return selectedData;
}

Вы также можете увидеть это в примерах Angular / React / Vue.js ниже:

Угловой

React

Vue.js

Vanilla JS
Примечание. При использовании Vanilla JS gridApi и columnApi можно получить из объекта gridOptions.

Прочтите полный текст на нашем блог или посетите наш документация для множества сценариев, которые можно реализовать с помощью ag-Grid.

Ахмед Гадир | Разработчик @ ag-Grid

person ahmedg94    schedule 04.06.2020

arrow_upward
1
arrow_downward

Если вы используете onSelectionChanged(), вы можете получить выбранные данные из функции onSelectionChanged, используя api.getSelectedRows().

selectedRow: any;
canceLDateAGGrid() {
    this.dateGridOptions = {
        columnDefs: [{
            headerName: this.Label[0].GEN_ORG_lblName,
            field: 'DependantName',
            width: 200,
            filter: 'agTextColumnFilter'
        }, ],
        showRowSelection: true,
        checkboxSelection: false,
        onSelectionChanged: (event) = > this.onSelectionChanged(event),
    };
}
onSelectionChanged(event) {
    let selectdata = event.api.getSelectedNodes();
    this.selectedRow = event.api.getSelectedRows();
    console.log(this.selectedRow)
}
person poovarasi sekar    schedule 06.02.2020