0

0

如何在 jqGrid 中清除工具栏搜索状态并确保数据源完整刷新

碧海醫心

碧海醫心

发布时间:2026-02-04 18:08:14

|

337人浏览过

|

来源于php中文网

原创

如何在 jqGrid 中清除工具栏搜索状态并确保数据源完整刷新

本文介绍解决 jqgrid 在启用 toolbar search 后调用 `reloadgrid()` 导致数据源被意外截断的问题:通过手动清除搜索状态并重置过滤器,确保后续搜索始终基于原始全量数据源。

在使用 jqGrid 的 Toolbar Search(工具栏搜索)功能时,一个常见但容易被忽视的陷阱是:当用户输入搜索文本并触发筛选后,jqGrid 内部会缓存当前的过滤条件,并在后续 reloadGrid() 调用中默认复用该过滤上下文——即使你已更新了 url 或 datatype。这导致看似“刷新”的网格,实际只对上一次筛选后的子集(如 26 条)重新请求,而非原始全量数据(如 100 条),从而造成搜索范围持续收缩。

根本原因在于:reloadGrid() 不会自动重置 Toolbar 的搜索状态。它仅根据当前 postData(含已应用的搜索参数)发起新请求,而这些参数仍保留着上次 filterToolbar() 所生成的过滤条件。

✅ 正确做法是在调用 reloadGrid() 前,显式清除工具栏过滤器状态:

魔术橡皮擦
魔术橡皮擦

智能擦除、填补背景内容

下载
function refreshGrid() {
    // 1. 清除 Toolbar 搜索状态(关键步骤!)
    const grid = $("#grid_id")[0];
    if (grid && typeof grid.clearToolbar === 'function') {
        grid.clearToolbar(true); // true 表示同时清空输入框值并重置内部过滤器
    }

    // 2. 重置数据源参数(可选,但推荐明确指定)
    $("#grid_id").jqGrid('setGridParam', {
        datatype: 'json',
        url: 'your-backend-api-url'
    });

    // 3. 触发刷新(此时 postData 已不含残留过滤参数)
    $("#grid_id").trigger('reloadGrid');
}

⚠️ 注意事项:

  • clearToolbar(true) 是 Guriddo jqGrid(v5.0+)及部分兼容版本中的标准方法;若使用经典 jqGrid(v4.x),需改用 $("#grid_id").jqGrid('destroyFilterToolbar') + 重建,或手动清空 postData 中的搜索字段(如 delete postData.searchString);
  • 若启用了 search: true 的 navGrid 高级搜索,clearToolbar() 不会影响高级搜索窗口的状态,二者独立维护;
  • 刷新后如需恢复之前的搜索文本(例如用户编辑完数据想继续原条件筛选),应在 clearToolbar(true) 后手动设置:
    $("#grid_id").jqGrid('setGridParam', { 
        postData: { searchString: 'your_previous_text', searchField: 'name', searchOper: 'cn' } 
    });
  • 推荐在编辑操作完成、准备刷新前统一调用 refreshFilterToolbar()(Guriddo 提供的辅助方法),它会同步更新 UI 输入框与内部过滤逻辑,避免视觉与行为不一致。

总结:reloadGrid() 本身不负责清理搜索上下文。要保证每次刷新都面向原始数据源,必须主动调用 clearToolbar(true) 彻底解除过滤绑定——这是保障搜索功能健壮性的关键实践。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

279

2023.11.13

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

216

2023.12.29

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

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

32

2026.02.04

学习通网页版入口与在线学习指南 学习通官网登录与使用方法
学习通网页版入口与在线学习指南 学习通官网登录与使用方法

本专题详细汇总了学习通网页版入口与登录方法,提供学习通官方网页端入口、学生登录平台、网页版使用指南等内容,帮助用户快速稳定地登录学习通官网,顺利进入学习平台,提升学习效率和体验。

6

2026.02.04

Python Web 框架 Django 深度开发
Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧,包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例,帮助学习者掌握 使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

7

2026.02.04

Java 流式处理与 Apache Kafka 实战
Java 流式处理与 Apache Kafka 实战

本专题专注讲解 Java 在流式数据处理与消息队列系统中的应用,系统讲解 Apache Kafka 的基础概念、生产者与消费者模型、Kafka Streams 与 KSQL 流式处理框架、实时数据分析与监控,结合实际业务场景,帮助开发者构建 高吞吐量、低延迟的实时数据流管道,实现高效的数据流转与处理。

3

2026.02.04

Golang 容器化与 Docker 实战
Golang 容器化与 Docker 实战

本专题深入讲解 Golang 应用的容器化与 Docker 部署,涵盖 Docker 基础概念、容器构建与镜像管理、Go 应用的 Dockerfile 编写、跨平台容器部署与优化、Docker Compose 和 Kubernetes 部署工具。通过实际案例,帮助学习者掌握 如何将 Golang 应用容器化并实现高效部署与管理,提升系统的可扩展性与运维效率。

3

2026.02.04

全国统一发票查询平台入口合集
全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

59

2026.02.03

短剧入口地址汇总
短剧入口地址汇总

本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

110

2026.02.03

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
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号