[agGrid] 동적 row select (getSelectedNodes, getSelectedRows, setSelected, selectNode)

ag-Grid에서 rowSelection 속성을 multiple 또는 single로 설정하여 다중 또는 단일 선택을 활성화할 수 있습니다.

 

팝업창에 rowSelection속성이 multiple인 그리드가 있고, 팝업을 닫을 때 선택했던 row를 저장해뒀다가 다시 팝업을 열 때 저장된 데이터를 그리드에서 선택되도록 하려고 합니다.

 

ag-Grid에서 row를 동적으로 선택하기 위해서는 다음과 같은 두 가지 방법을 사용할 수 있습니다.

1. selectNode

api.selectNode(node, tryMulti): 지정된 노드를 선택하고 선택한 상태로 변경합니다.

• node: 선택할 노드입니다.
• tryMulti (선택적): true로 설정하면 노드를 다중 선택할 수 있습니다.

예를 들어, 특정 인덱스의 노드를 선택하려면 다음과 같은 코드를 사용할 수 있습니다.

const index = 0; // 선택할 노드의 인덱스
const node = api.getRowNode(index);
api.selectNode(node);

 

2. setSelected

forEachNode 메서드를 사용하여 모든 노드를 반복하고, 선택할 데이터를 포함하는 노드를 선택합니다.

setSelected 메서드를 사용하여 노드를 선택합니다. 

const selectedData = [{ id: 1 }, { id: 2 }];
gridOptions.api.forEachNode(node => {
  if (selectedData.some(selected => selected.id === node.data.id)) {
    node.setSelected(true);
  }
});

 

+ getSelectedNodes

agGrid에서 선택된 Node를 배열로 들고오는 함수입니다.

let selectedNodes = api.getSelectedNodes();

+ getSelectedRows

agGrid에서 선택된 rowData를 배열로 들고오는 함수입니다.

let selectedRow = api.getSelectedRows();

 

+ Node의 seleted 속성

전체 노드를 가져와서 seleced 속성을 확인할 수 있습니다.

let allRows = api.rowModel.nodeManager.allNodesMap;
  for (let i = 0; i < Object.keys(allRows).length; i++) {
    if (allRows[i].selected) {
      //
    }
  }