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

浅杰吖_7480

浅杰吖_7480

2026-02-04

987人浏览

原创

如何在 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():

    Expanso json-flatten
    Expanso json-flatten

    通过 CLI 或 MCP 服务器,使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

    下载
    // 保持搜索框文本不变,但重新向服务端发起带新搜索条件的请求
    $("#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 始终基于原始数据集进行动态过滤与刷新。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js 前端 json 浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

2023.06.29

2965

3

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

2023.08.14

4101

10

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

2023.08.31

3311

3

MySQL恢复数据库
MySQL恢复数据库

MySQL恢复数据库的方法有使用物理备份恢复、使用逻辑备份恢复、使用二进制日志恢复和使用数据库复制进行恢复等。本专题为大家提供MySQL数据库相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.05

1047

5

vb中怎么连接access数据库
vb中怎么连接access数据库

vb中连接access数据库的步骤包括引用必要的命名空间、创建连接字符串、创建连接对象、打开连接、执行SQL语句和关闭连接。本专题为大家提供连接access数据库相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.09

2887

5

数据库对象名无效怎么解决
数据库对象名无效怎么解决

数据库对象名无效解决办法:1、检查使用的对象名是否正确,确保没有拼写错误;2、检查数据库中是否已存在具有相同名称的对象,如果是,请更改对象名为一个不同的名称,然后重新创建;3、确保在连接数据库时使用了正确的用户名、密码和数据库名称;4、尝试重启数据库服务,然后再次尝试创建或使用对象;5、尝试更新驱动程序,然后再次尝试创建或使用对象。

2023.10.16

2887

4

vb连接access数据库的方法
vb连接access数据库的方法

vb连接access数据库方法:1、使用ADO连接,首先导入System.Data.OleDb模块,然后定义一个连接字符串,接着创建一个OleDbConnection对象并使用Open() 方法打开连接;2、使用DAO连接,首先导入 Microsoft.Jet.OLEDB模块,然后定义一个连接字符串,接着创建一个JetConnection对象并使用Open()方法打开连接即可。

2023.10.16

2953

3

vb连接数据库的方法
vb连接数据库的方法

vb连接数据库的方法有使用ADO对象库、使用OLEDB数据提供程序、使用ODBC数据源等。详细介绍:1、使用ADO对象库方法,ADO是一种用于访问数据库的COM组件,可以通过ADO连接数据库并执行SQL语句。可以使用ADODB.Connection对象来建立与数据库的连接,然后使用ADODB.Recordset对象来执行查询和操作数据;2、使用OLEDB数据提供程序方法等等。

2023.10.19

2701

3

mdf文件导入数据库的方法
mdf文件导入数据库的方法

mdf文件导入数据库的方法有使用SQL Server Management Studio、使用SQL Server命令行工具、使用SQL Server Integration Services等方法。想了解更多mdf文件导入数据库的方法的相关内容,可以阅读本专题下面的文章。

2023.10.23

2953

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.3万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习