SuperAPI AI 工具集

row-selection

通用与其它

查看项目

更新于 10-16 03:04

技能介绍

用途:在 TanStack Table 中实现并维护行选择状态,选择以独立 ID 状态存在,已选中行模型只能实体化已加载的行。

主要能力:支持单选、多选、子行选择,以及 Shift 范围选择。范围行为默认启用,可用 enableRowRangeSelection: false 关闭。选择处理可通过 row.getToggleSelectedHandler() 获取,普通交互建立表内锚点,Shift 交互将勾选值应用到当前显示顺序的闭区间范围。selectChildren: false 可让范围仅作用于显式显示的行,避免改动折叠的子孙行;deselectParents: true 可在取消子行选择时删除祖先 ID。全选遵循子行选择规则,enableSubRowSelection: false 或逐行谓词会跳过被阻止父行的子孙。

使用方式:导入 rowSelectionFeature 与 tableFeatures,用 tableFeatures({ rowSelectionFeature }) 生成 features;选项需提供稳定 getRowId(如 (row) => row.id),不要用可变索引。用 table.getSelectedRowIds() 获取 ID,用 table.getSelectedRowModel().rows 获取当前加载的选中行对象。行复选框应绑定 click 事件到 getToggleSelectedHandler(),因为原生 change 事件通常不携带修饰键;React 可通过 nativeEvent 暴露原始点击。

限制:选择是独立状态,删除数据后仍可能保留 ID,需自行清理;手动分页时未加载的选中 ID 没有对应行对象,服务器端无法用 Shift 跨页选择,需要数据库级意图时应改用 ID。直接调用 row.toggleSelected() 或 table.setRowSelection() 不会移动范围锚点。其余细节暂未提供。