讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在 jqGrid 中清除搜索栏过滤状态并恢复原始数据源

星婷君_1917

星婷君_1917

发布时间:2026-02-04 16:56:04

|

760人浏览过

|

来源于php中文网

原创

如何在 jqGrid 中清除搜索栏过滤状态并恢复原始数据源

本文介绍在 jqgrid 使用 toolbar search 时,调用 `reloadgrid()` 后搜索状态残留导致后续过滤仅作用于已过滤子集的问题,并提供通过 `cleartoolbar(true)` 和 `refreshfiltertoolbar()` 恢复原始数据源的完整解决方案。

在使用 jqGrid 的 Toolbar Search(工具栏搜索)功能时,一个常见但易被忽视的问题是:当用户输入搜索文本、触发前端或服务端过滤后,再执行 reloadGrid()(例如编辑完某行后刷新表格),jqGrid 默认会保留当前搜索条件,并在后续手动修改搜索框内容时,仅对已过滤后的结果集(如 26 条)进行二次过滤——而非回到原始数据源(如 100 条)重新筛选。这本质上是因 jqGrid 内部缓存了搜索状态,且未重置其过滤上下文。

要彻底解决该问题,关键在于显式清除搜索栏状态并同步重置过滤逻辑,而非仅刷新数据。以下是推荐的两步处理方案:

✅ 正确做法:清除搜索状态 + 刷新过滤器

function refreshGrid() {
    // 步骤1:强制清空工具栏搜索值,并重置内部过滤状态
    const grid = $("#grid_id")[0];
    if (grid && typeof grid.clearToolbar === 'function') {
        grid.clearToolbar(true); // true 表示同时触发 filterToolbar 重绘和参数重置
    }

    // 步骤2:更新请求参数(如需更换 URL 或参数)
    $("#grid_id").jqGrid('setGridParam', {
        datatype: 'json',
        url: 'your-data-url.php' // 确保指向完整数据源接口
    });

    // 步骤3:触发重载 —— 此时将基于原始数据源重新加载,且搜索框已清空
    $("#grid_id").trigger('reloadGrid');
}
⚠️ 注意:clearToolbar(true) 是 Guriddo jqGrid(v5.0+)及部分兼容版本的关键方法;若使用旧版 free jqGrid 或 jqGrid 4.x,需改用 $("#grid_id").jqGrid('destroyFilterToolbar') 后重建,或手动清空搜索输入框并调用 trigger('reloadGrid', {current: true})。

? 进阶需求:保留搜索文本但重置过滤范围?

若业务要求保留用户输入的搜索文本(如用户不希望清空输入框),但希望下次按该文本过滤时仍基于全量数据(100 条),则应在 reloadGrid 前调用:

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载
// 保持搜索框文本不变,但强制重新初始化过滤器逻辑
$("#grid_id")[0].refreshFilterToolbar();

该方法会重新绑定搜索事件、重置内部过滤器状态,确保后续 onchange 或回车触发的搜索均作用于服务器返回的完整数据集。

? 总结与最佳实践

  • ❌ 避免仅调用 reloadGrid():它不重置搜索上下文,导致“过滤嵌套”;
  • ✅ 每次需要回归原始数据源时,优先执行 clearToolbar(true)(清空+重置)或 refreshFilterToolbar()(保留文本+重置逻辑);
  • ✅ 确保 url 参数始终指向能返回全量数据(未预过滤)的服务端接口;
  • ✅ 在模态框保存成功回调中统一调用上述刷新逻辑,避免状态不一致;
  • ? 参考文档:Guriddo jqGrid – Toolbar Searching Methods

通过以上方式,即可彻底解决搜索状态“污染”原始数据源的问题,保障用户体验与数据一致性。

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3228

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

5349

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3869

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

486

2026.01.19

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

20

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

20

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

20

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

40

2026.11.05

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

20

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn