[agGrid] row 선택 이벤트

onSelectionChanged와 onRowSelected는 모두 ag-Grid에서 row selection 관련 이벤트를 처리하기 위한 콜백 함수입니다.

두 함수는 파라미터가 다르므로 필요한 데이터에 따라 선택하여 사용하면 될 것 같습니다.

1. onSelectionChanged

api.getSelectedNodes() 및 api.getSelectedRows() 메서드를 사용하여 선택한 노드/행 데이터의 새 목록을 가져옵니다.

• api.getSelectedNodes() 메서드는 선택된 모든 row의 Node 객체를 반환합니다.
• api.getSelectedRows() 메서드는 선택된 모든 row의 데이터 객체를 반환합니다.

// gridOptions 객체 설정
var gridOptions = {
  onSelectionChanged: onSelectionChanged // selectionChanged 이벤트 핸들러 등록
  // ... 그 외 다른 설정들
};

// selectionChanged 이벤트 핸들러
function onSelectionChanged(event) {
  var selectedRows = event.api.getSelectedRows(); // 선택된 row의 데이터 배열
  var selectedNodes = event.api.getSelectedNodes(); // 선택된 row의 Node 객체 배열

  selectedRows.forEach(function(selectedRow, index) {
    console.log("Selected row " + index + " data: ", selectedRow); // 선택된 row의 데이터 출력
    console.log("Selected row " + index + " index: ", selectedNodes[index].rowIndex); // 선택된 row의 인덱스 출력
  });
}

// grid 생성
var grid = new agGrid.Grid(gridDiv, gridOptions);

// 그 외 코드들

 

2. onRowSelected

row가 선택됐을 때와 선택이 해제되었을 때 모두 발생합니다.

 

파라미터인 event는 아래의 값들을 포함합니다.

이벤트에 노드가 포함되어 있으므로

노드의 isSelected() 메서드를 호출하여 노드가 선택되었는지 선택 취소되었는지 확인합니다.

event.node.isSelected()

 

// gridOptions 객체 설정
var gridOptions = {
  onRowSelected: onRowSelected // rowSelected 이벤트 핸들러 등록
  // ... 그 외 다른 설정들
};
// rowSelected 이벤트 핸들러
function onRowSelected(event) {
  // 선택된 row의 데이터 및 인덱스 등을 출력
  console.log("Row selected: " + event.data + ", index: " + event.rowIndex);
}

// grid 생성
var grid = new agGrid.Grid(gridDiv, gridOptions);

// 그 외 코드들

 

아래 코드 처럼 row가 선택될 때 필요한 부분만 추출하여 다른 배열에 담고 해제될 때 제거하도록 할 수 있습니다.

onGridReady: function (api) {
  this.gridApi = api;
  this.columnApi = this.gridApi.getColumnApi();
  this.gridOption = this.gridApi.getGridOptions();
  let that = this;
  this.gridOption.onRowSelected = function (event) {
    let rowNode = event.node;
    if (rowNode.isSelected()) {
      let data = {};
      data.id = rowNode.data.id;
      data.value = rowNode.data.name;
      that.data.selectedData.push(data);
    } else {
      for (let i = 0; i < that.data.selectedData.length; i++) {
        if (that.data.selectedData[i].id == rowNode.data.id) {
          that.data.selectedData.splice(i, 1);
          break;
        }
      }
    }
  };
},