reactjs - 如何在 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}
{...}
/>
</>
);
现场演示
推荐阅读
- python - Python、NLP:如何从文本文件中找到所有以形容词为中间词的三元组
- unity3d - 对“Matrix4x4”类型的引用声称它在“System.Numerics”中定义,但找不到
- python - 使用熊猫将重复行与条件相加
- cmake - 无法禁用 CUDA 构建并且进程停止
- snowflake-cloud-data-platform - Snowflake:列出所有角色及其对每个数据库对象的访问级别
- firebase - 如何按 Firebase 中另一个集合的属性值对文档进行排序?
- python - 获取 xlrd 和 xlwt 之后的单元格值
- r - 限制 ggplot2 绘图的 X 和 Y 轴
- ios - UICollectionView 单元格未根据具有自动调整大小的单元格内容调整大小
- apache-kafka - Apache Flink:如何使用 Flink 从 Apache Kafka 写入 Apache Cassandra