如何在 Kendo UI Grid 中持久化跨页选中状态-js教程-PHP中文网

如何在 Kendo UI Grid 中持久化跨页选中状态

本文介绍通过手动管理选中项 ID 列表 + 自定义复选框 + dataBound 回调，实现 Kendo Grid 跨分页、跨导航的真正持久化选择状态，解决 persistSelection: true 在虚拟滚动或远程分页下失效的问题。

本文介绍通过手动管理选中项 id 列表 + 自定义复选框 + `databound` 回调，实现 kendo grid 跨分页、跨导航的真正持久化选择状态，解决 `persistselection: true` 在虚拟滚动或远程分页下失效的问题。

Kendo UI Grid 的 persistSelection: true 选项虽能简化基础场景下的行选中保持逻辑，但在实际分页应用（尤其是远程数据源）中常表现异常：当用户在第一页取消勾选某行、跳转至第二页后再返回时，该行会“自动恢复”选中——这是因为 persistSelection 仅在当前数据视图内维护 DOM 级选中状态，并未真正绑定到业务 ID，且不感知页面切换带来的数据重载。

要实现真正基于业务主键（如 ProductID）的、全生命周期可追溯的选择状态管理，推荐采用「可控复选框 + 外部状态缓存」模式。核心思路是：放弃 Grid 内置的 selectable: true 列，改用自定义 HTML 复选框列，将所有选中/取消操作显式映射到一个全局 ID 数组，并在每次 dataBound 时根据该数组同步 DOM 状态。

✅ 正确实现步骤

禁用内置选择列，改用 ClientTemplate 渲染带唯一 ID 的复选框：

columns.Bound(p => p.ProductID)
.ClientTemplate("<input type="checkbox" productid>")
.Title("Select")
.Width(60)
.HtmlAttributes(new { style = "text-align:center" });

定义全局选中 ID 缓存与状态更新函数：

// 全局存储已选 ProductID（建议替换为 sessionStorage 或 Vuex/Pinia 以支持多 Tab）
let selectedProductIDs = JSON.parse(sessionStorage.getItem('gridSelection') || '[]');

// dataBound 时批量同步复选框状态 function onDataBoundGrid(e) { selectedProductIDs.forEach(id => { const $chk = $(#chk-${id}); if ($chk.length) $chk.prop('checked', true); }); }

3. **在 Grid 配置中挂载事件**：  
```javascript
$("#grid").kendoGrid({
  dataSource: dataSourceTEST,
  pageable: true,
  sortable: true,
  columns: [ /* 上述自定义列 */ ],
  // 关键：禁用内置 selection，启用自定义事件
  selectable: false,
  events: {
    dataBound: onDataBoundGrid
  }
});

⚠️ 注意事项与最佳实践

不要依赖 this.selectedKeyNames()：该方法仅返回当前页可见行的选中 ID，无法反映历史选择；应始终以 selectedProductIDs 数组为准。
ID 唯一性保障：确保 id='chk-#= ProductID #' 中的 ProductID 全局唯一且不可为空，避免 DOM 冲突。
性能优化：若数据量极大（>1000 行/页），forEach + $() 查找可改为 document.querySelectorAll('[id^="chk-"]') 批量处理。
服务端同步：如需提交选中项至后端，直接发送 selectedProductIDs 数组，而非依赖 Grid 的 selectedItems()。

清除逻辑补充（可选）：

function clearAllSelections() {
selectedProductIDs = [];
sessionStorage.removeItem('gridSelection');
// 可选：重置当前页所有复选框
$('.k-grid tbody input[type="checkbox"]').prop('checked', false);
}

此方案完全绕过 Kendo Grid 内置选择机制的局限性，将状态控制权交还开发者，确保无论分页、筛选、刷新甚至关闭浏览器后重新打开，用户的选择都精准可还原——这才是企业级应用所需的可靠选择持久化方案。