如何在grid.js中获取分页状态下选中行的完整数据？

问题核心 #

Grid.js 的 store.state.data 仅存储当前分页的渲染数据，无法直接通过它获取跨分页选中行的完整数据，但插件能正确返回所有选中的 rowIds，核心思路是通过独立维护的全量数据源（或后端接口）匹配选中的rowIds。

解决方案一：前端维护全量数据（适用于数据量不大的场景） #

1. 提前定义全量原始数据，不依赖Grid.js的store存储所有数据
2. 获取选中的rowIds后，直接从全量数据中筛选对应行

代码示例

// 1. 定义全量数据
const fullData = [
  { id: 'A', name: 'Alice', age: 25 },
  { id: 'B', name: 'Bob', age: 30 },
  { id: 'C', name: 'Charlie', age: 35 },
  { id: 'D', name: 'David', age: 40 },
  { id: 'E', name: 'Eve', age: 45 }
];

// 2. 初始化Grid.js实例
const grid = new Grid({
  columns: ['id', 'name', 'age'],
  // 分页逻辑：根据当前页码返回对应切片数据
  data: () => {
    const { page, limit } = grid.config.pagination;
    const start = (page - 1) * limit;
    const end = start + limit;
    return fullData.slice(start, end);
  },
  pagination: { limit: 3 },
  plugins: [
    GridSelectionPlugin({
      rowSelection: true
    })
  ]
});

grid.render(document.getElementById('grid'));

// 3. 获取选中行完整数据的函数
function getData() {
  // 获取所有跨分页选中的rowIds
  const selectedIds = grid.plugins.selection.getSelectedRows().rowIds;
  // 从全量数据中筛选匹配项
  const selectedRows = fullData.filter(item => selectedIds.includes(item.id));
  
  console.log('选中的完整数据:', selectedRows);
  // 此时就能拿到如'A'和'E'的完整数据
}

解决方案二：服务端分页场景（数据量较大时） #

如果数据是从后端分页加载的，前端没有全量数据，需要把选中的rowIds传给后端，由后端返回对应行的完整数据：

代码示例

async function getData() {
  const selectedIds = grid.plugins.selection.getSelectedRows().rowIds;
  
  // 调用后端接口，传递选中的rowIds
  const res = await fetch('/api/selected-rows', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ rowIds: selectedIds })
  });
  
  const selectedRows = await res.json();
  console.log('选中的完整数据:', selectedRows);
}

关键说明 #

Grid.js的store设计仅用于存储当前视图渲染所需的数据，分页模式下不会缓存所有分页的数据，所以必须通过独立维护全量数据或后端查询的方式获取跨分页选中行的完整信息，不能依赖store的state.data。

内容的提问来源于stack exchange，提问作者Daniel Logan