MVC项目中Multiselect为true的JqGrid定时刷新后保留复选框选中状态的解决方案

嗨，我来帮你搞定这个JqGrid刷新后复选框选中状态丢失的问题！这个场景我在项目里碰到过好多次，核心思路其实很简单——刷新前先把选中的行ID存起来，刷新完成后再把这些行重新勾选上。下面是具体的实现步骤，一步步来：

1. 定义全局变量存储选中行ID #

首先，我们需要一个全局变量来临时保存刷新前选中的行ID，确保它在刷新过程中不会被清空：

// 全局变量，用于暂存选中的行ID
var selectedRowIds = [];

2. 编写保存选中行的函数 #

在触发刷新操作前，调用这个函数获取当前所有选中的行ID并存储起来：

// 保存当前选中的行ID到全局变量
function saveSelectedRows() {
    // 替换成你的JqGrid的实际ID
    selectedRowIds = $("#myGrid").jqGrid('getGridParam', 'selarrrow');
}

3. 修改定时刷新逻辑 #

调整你的setInterval定时任务，先保存选中行再刷新表格。如果需要保留当前分页状态，记得不要强制跳回第一页：

// 表格刷新函数
function refreshGrid() {
    // 第一步：保存选中的行
    saveSelectedRows();
    
    // 第二步：刷新表格，保留当前页码
    $("#myGrid").jqGrid('setGridParam', {
        datatype: 'json',
        page: $("#myGrid").jqGrid('getGridParam', 'page') // 保留当前页，不需要的话可以去掉
    }).trigger('reloadGrid');
}

// 设置每隔2分钟（120000毫秒）刷新一次
setInterval(refreshGrid, 120000);

4. 在刷新完成后恢复选中状态 #

在JqGrid的初始化配置中添加loadComplete回调，这个回调会在表格数据加载完成后触发，我们在这里把之前保存的行重新选中：

// 初始化JqGrid的配置示例
$("#myGrid").jqGrid({
    // 你的其他配置项，比如url、colModel等...
    multiselect: true, // 你已经开启的多选配置
    loadComplete: function() {
        var grid = $(this);
        // 遍历保存的选中行ID，逐个勾选
        $.each(selectedRowIds, function(index, rowId) {
            // 先检查当前行是否在当前分页中存在，避免报错
            if (grid.jqGrid('getRowData', rowId)) {
                // 第二个参数设为false，避免触发行选中事件（如果不需要额外操作的话）
                grid.jqGrid('setSelection', rowId, false);
            }
        });
    }
});

关键注意事项 #

• 确保行ID一致性：你的JqGrid每行的ID必须是唯一且稳定的，不能每次刷新都生成新的ID，否则保存的ID无法对应到新加载的行。
• 作用域问题：如果你的JqGrid是放在分部页里的，要确保selectedRowIds全局变量的作用域能覆盖到分部页的脚本，建议把这个变量定义在主页面的<script>标签中。
• 分页场景处理：如果用户选中的行不在当前刷新后的分页里，这些行自然无法被选中，这是正常现象——毕竟当前页没有这些行，你可以根据业务需求添加提示或者用localStorage持久化跨页的选中ID（如果需要跨页保留的话）。

内容的提问来源于stack exchange，提问作者Ranjan Kaw