如何在 jqGrid 中清除搜索栏并确保重载后仍基于原始数据源过滤

jqgrid 在使用工具栏搜索后执行 reloadgrid 会保留过滤状态，导致后续搜索仅作用于已过滤的子集；需调用 cleartoolbar(true) 清除过滤器并重置数据源视图，再配合 refreshfiltertoolbar 实现正确刷新。

在使用 jqGrid 的高级搜索或内联工具栏（filterToolbar）时，一个常见但易被忽视的问题是：当用户输入搜索条件并触发 reloadGrid() 后，Grid 的内部数据缓存（postData 中的搜索参数）并未自动重置。即使你调用了 setGridParam({ url: '...' }) 并触发重载，jqGrid 仍会将上一次的搜索条件（如 searchField、searchString、searchOper 等）一并提交到服务器——这本身是预期行为；但问题在于客户端本地过滤逻辑（尤其是启用 searching: true + toolbar: true 时）可能错误地对已加载的子集（如 26 条）进行二次过滤，而非重新请求完整数据集（100 条）。

根本原因在于：clearToolbar(false)（默认）仅清空输入框文本，但不重置 Grid 内部的搜索参数和过滤状态；而 clearToolbar(true) 才会真正清除 postData 中所有搜索字段，并通知 Grid 恢复“无过滤”状态。

✅ 正确做法如下：

1. 清除过滤器（关键步骤）：在调用 reloadGrid() 前，显式调用 clearToolbar(true)：

   function refreshGrid() {
    var $grid = $("#grid_id");
    var gridDom = $grid[0];
   
    // ✅ 强制清除所有搜索参数（包括 postData 和 UI 输入框）
    if (gridDom.clearToolbar) {
        gridDom.clearToolbar(true);
    }
   
    // 更新参数（可选：确保 URL 和 datatype 正确）
    $grid.jqGrid('setGridParam', {
        datatype: 'json',
        url: '/api/data' // 替换为你的实际 URL
    });
   
    // ✅ 触发重载（此时将发送无搜索参数的请求，获取全量数据）
    $grid.trigger('reloadGrid', [{ current: true }]);
   }

2. 若需保留搜索文本但强制服务端重过滤（例如用户编辑了搜索框内容），请改用 refreshFilterToolbar()：

   

   万物追踪

   AI 追踪任何你关心的信息

   下载

   // 保持搜索框文本不变，但重新向服务端发起带新搜索条件的请求
   $("#grid_id").jqGrid('refreshFilterToolbar');

   该方法会读取当前工具栏输入值，更新 postData，并自动触发 reloadGrid()，确保每次搜索都基于原始数据源（前提是后端正确处理 filters 参数并返回全量匹配结果）。

⚠️ 注意事项：

• clearToolbar(true) 仅适用于启用了 filterToolbar 的 Grid（即初始化时配置了 toolbar: [true, {}]）；
• 若使用的是旧版 jqGrid（非 Guriddo 或 free-jqGrid），方法名可能为 triggerToolbar() 或需手动清空 postData，建议升级至 Guriddo jqGrid 或 free-jqGrid v4.15+；
• 始终检查浏览器开发者工具 Network 面板，确认重载请求的查询参数中是否包含 filters= 或 searchString= —— 清除成功后这些参数应消失或为空；
• 服务端逻辑必须兼容：当无搜索参数时，返回全部记录；当有参数时，执行数据库级过滤（而非内存过滤），避免前端二次失真。

通过以上方式，即可彻底解决“搜索后 reload 导致数据源被截断”的问题，确保 Grid 始终基于原始数据集进行动态过滤与刷新。