0

0

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

霞舞

霞舞

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

|

756人浏览过

|

来源于php中文网

原创

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

jqgrid 在启用工具栏搜索后,若仅调用 reloadgrid() 而未重置搜索状态,会导致后续过滤仅作用于已缓存的子集(如 26 条),而非原始全量数据(如 100 条)。本文详解如何正确清除搜索条件、刷新工具栏并恢复完整数据源过滤能力。

在使用 jqGrid 的高级搜索或工具栏搜索(filterToolbar)功能时,一个常见但易被忽视的问题是:reloadGrid() 并不会自动清除前端已应用的搜索条件。当用户输入关键词过滤出部分记录(例如从 100 条筛出 26 条),再执行编辑并调用 reloadGrid() 后,Grid 内部的搜索状态(如 postData.filters 或工具栏输入值)依然保留。此时若用户修改或清空搜索框,jqGrid 实际执行的是对「当前已加载的 26 条」进行二次过滤——而非向后端重新请求全部 100 条后再过滤。

要彻底解决该问题,关键在于 显式重置搜索上下文,而非仅刷新数据。以下是推荐的三步处理方案:

✅ 正确做法:清除 + 刷新 + 重载

function refreshGrid() {
    var $grid = $('#grid_id');
    var gridDOM = $grid[0];

    // Step 1: 清除工具栏搜索状态(true 表示同时清空输入框和内部 filter 状态)
    if (gridDOM.clearToolbar) {
        gridDOM.clearToolbar(true);
    }

    // Step 2: (可选)强制刷新过滤工具栏 UI,确保输入框视觉重置
    if (gridDOM.refreshFilterToolbar) {
        gridDOM.refreshFilterToolbar();
    }

    // Step 3: 重置数据源参数并触发重载(确保下次请求为全量数据)
    $grid.jqGrid('setGridParam', {
        datatype: 'json',
        url: 'URL', // 确保此 URL 不带客户端过滤参数
        postData: {} // 清空可能残留的 filters/postData(尤其使用 JSON string filters 时)
    });

    $grid.trigger('reloadGrid', [{ current: true }]);
}

⚠️ 注意事项

  • clearToolbar(true) 是 Guriddo jqGrid(v5.0+)及部分兼容版本的核心方法;若使用旧版 free jqGrid 或原生 jqGrid,需改用 $("#grid_id").jqGrid("destroyFilterToolbar") 后重建,或手动清空 postData.filters 并调用 setGridParam({ postData: {...} })。
  • 确保后端接口 URL 不依赖前端缓存的过滤逻辑。例如,避免在 JS 中拼接 ?search=xxx 到 URL —— 应始终由 postData 或 filters 对象统一传递,服务端据此决定是否过滤。
  • 若启用了 search: true 和 multipleSearch: true,还需检查 postData.filters 是否为 JSON 字符串,必要时设为 null 或 {}:
    $grid.jqGrid('setGridParam', { 
        postData: { filters: null } 
    });
  • 建议在 beforeRequest 事件中统一日志输出 postData,便于调试过滤参数是否残留。

? 补充:监听搜索框变化时的防御性处理

为防止用户手动修改搜索框后仍受限于子集,可在工具栏输入事件中主动干预:

万物追踪
万物追踪

AI 追踪任何你关心的信息

下载
// 假设工具栏输入框 class 为 'ui-search-input'
$('#grid_id').on('input', '.ui-search-input', function() {
    // 检测到搜索行为变更,可提前清理潜在脏状态(非必须,但增强鲁棒性)
    var $grid = $('#grid_id');
    if ($grid[0].clearToolbar) {
        $grid[0].clearToolbar(false); // false:不清空输入框,只重置内部状态
    }
});

通过以上方式,即可确保每次 reloadGrid() 后,Grid 始终基于原始全量数据源响应新的搜索请求,彻底规避“越搜越少”的陷阱。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

425

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

538

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

313

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

78

2025.09.10

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

238

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

560

2024.03.01

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

381

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

213

2023.09.04

抖音网页版入口与视频观看指南 抖音官网视频在线访问
抖音网页版入口与视频观看指南 抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口,帮助用户快速访问抖音网页版,提供免登录访问方式和直接进入视频播放页面的方法,确保顺利浏览和观看抖音视频。

22

2026.02.04

热门下载

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

精品课程

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

共101课时 | 8.8万人学习

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

共39课时 | 3.2万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号