本文介绍通过手动管理选中项 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' " + "id='chk-#= ProductID #' " + "onchange='updateSelection(this, #= ProductID #);' " + "class='k-checkbox' />") .Title("Select") .Width(60) .HtmlAttributes(new { style = "text-align:center" }); -
定义全局选中 ID 缓存与状态更新函数：
// 全局存储已选 ProductID（建议替换为 sessionStorage 或 Vuex/Pinia 以支持多 Tab） let selectedProductIDs = JSON.parse(sessionStorage.getItem('gridSelection') || '[]');
function updateSelection(checkbox, productId) { if (checkbox.checked) { if (!selectedProductIDs.includes(productId)) { selectedProductIDs.push(productId); } } else { const idx = selectedProductIDs.indexOf(productId); if (idx > -1) selectedProductIDs.splice(idx, 1); } // 持久化到 sessionStorage，确保刷新/跨页不丢失 sessionStorage.setItem('gridSelection', JSON.stringify(selectedProductIDs)); }
// 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 内置选择机制的局限性，将状态控制权交还开发者，确保无论分页、筛选、刷新甚至关闭浏览器后重新打开，用户的选择都精准可还原——这才是企业级应用所需的可靠选择持久化方案。
