web-dev-qa-db-ja.com

Agグリッド行の選択

ag-gridの行を選択するとき、次を使用したセル選択の助けを借りて：this.gridOptions.rowMultiSelectWithClick = true;計算のためだけに最後に選択された行にアクセスし、以前に選択された行の状態をそのまま維持することは可能ですか？.

angularag-gridag-grid-ng2
4
Komal Aneja

Paritoshの説明に加えて、rowSelectedイベントをリッスンしてノードの配列を維持できます。

_<ag-grid-angular
   [rowSelection]="rowSelection"
   (rowSelected)="onRowSelected($event)"
   [rowMultiSelectWithClick]="true"
   (selectionChanged)="onSelectionChanged($event)"></ag-grid-angular>
_
_selectedNodes: RowNode[];     

onRowSelected(event) {
   if(event.node.selected) {
      this.selectedNodes.Push(event.node);
   }
}

getLastItem() {
   return this.selectedNodes[this.selectedNodes.length - 1];
} 
_

必要に応じて、いつでもgetLastItem()メソッドを呼び出して、最後に選択したノードを取得できます。

3
Senal

確かに、そのためにはonRowSelectedイベントを使用する必要があります。このイベントでは、必要なデータをevent引数として取得します。

onRowSelected(event) {
  console.log("row " + event.node.data + " selected = " + event.node.selected);
}

データ：event.node.data
選択されているかどうか：event.node.selected

<ag-grid-angular
  .....
  [rowSelection]="rowSelection"
  (rowSelected)="onRowSelected($event)"
  [rowMultiSelectWithClick]="true"
  (selectionChanged)="onSelectionChanged($event)"
  ></ag-grid-angular>

これがライブの例です： Plunk-ag-grid rowMultiSelectWithClick

更新

gridApiを使用すると、最後に選択したノードを取得できます。これは、行の選択を解除するときにも機能します。最後の行を選択解除する前に選択されていた最後の行が表示されます。

getLastSelectedNode(){
  let rows = this.gridApi.getSelectedRows();
  if(rows.length > 0)
    console.log(rows[rows.length - 1]);
  else
    console.log('No rows selected');
}

更新されたプランク

2
Paritosh