如何在ag-Grid中获得选择顺序？

问题描述

我正在使用网格API通过功能 getSelectedRows（）获取选定的行。但是，行列表似乎是无序的，即项目与我选择的顺序不符。

还有另一种方法来按选定的顺序获取选定的行吗？

解决方法

您可以自己跟踪所选项目，并通过听selectionChanged事件来确保按时间顺序排列。

// global keyboard state,put this outside of the function body
// we need to store the current shift key state to know if user
// are selecting multiple rows
const KEYBOARD_STATE = {
  isShiftPressed: false
};
document.addEventListener("keydown",(e) => {
  KEYBOARD_STATE.isShiftPressed = e.key === "Shift";
});
document.addEventListener("keyup",(e) => {
  KEYBOARD_STATE.isShiftPressed = false;
});

const [selection,setSelection] = React.useState([]);
const onSelectionChanged = (e) => {
  const selectedNodes = e.api.getSelectedNodes();
  const lastSelectedNode =
    selectedNodes[0]?.selectionController?.lastSelectedNode;
  // if lastSelectedNode is missing while multi-selecting,// AgGrid will select from the first row
  const selectedNodeFrom = lastSelectedNode || e.api.getRenderedNodes()[0];
  const isRangeSelect = KEYBOARD_STATE.isShiftPressed;
  const difference = (arr1,arr2) => arr1.filter((x) => !arr2.includes(x));
  const newSelection = difference(selectedNodes,selection);

  if (newSelection.length > 0) {
    if (isRangeSelect) {
      const isSelectBackward =
        newSelection[0].rowIndex < selectedNodeFrom.rowIndex;

      if (isSelectBackward) {
        newSelection.reverse();
      }
    }

    newSelection.forEach((n) => updateSelection(n));
  } else {
    updateSelection(); // deselect
  }
};

const updateSelection = (rowNode) => {
  setSelection((selections) => {
    if (rowNode) {
      const isSelected = rowNode.isSelected();

      if (isSelected) {
        return [...selections,rowNode];
      } else {
        return selections.filter((s) => s.id !== rowNode.id);
      }
    } else {
      return selections.filter((n) => n.isSelected());
    }
  });
};

return (
  <>
    <pre>
      {JSON.stringify(selection.map((n) => n.data.id))}
    </pre>
    <AgGridReact
      rowSelection="multiple"
      columnDefs={columnDefs}
      rowMultiSelectWithClick
      onSelectionChanged={onSelectionChanged}
      {...}
    />
  </>
);

实时演示