如何设置jqGrid通用搜索字段在调整大小时清空及实现筛选自适应

嘿，我来帮你搞定这个jqGrid的问题！针对你提到的「调整表格尺寸时自动清空通用搜索字段」以及「保证尺寸变化时筛选功能正常工作」这两个需求，我整理了具体的实现方案和代码示例，一起来看看：

核心思路 #

jqGrid本身没有自带表格尺寸变化的监听事件，我们需要借助jQuery的resize事件来监听窗口或表格容器的尺寸变化。同时为了避免频繁触发事件导致性能问题，我们会用防抖函数来优化执行频率。然后结合jqGrid的内置API来处理搜索字段的清空或筛选的重新生效。

代码示例 #

1. 基础jqGrid初始化（含搜索工具栏） #

先创建一个带顶部搜索工具栏的jqGrid，这是通用搜索的常见场景：

// 初始化jqGrid
$("#grid").jqGrid({
    url: "your-data-api-url", // 替换成你的数据接口
    datatype: "json",
    colModel: [
        { name: "id", label: "ID", width: 80, search: false },
        { name: "username", label: "用户名", width: 150, search: true },
        { name: "email", label: "邮箱", width: 200, search: true },
        { name: "role", label: "角色", width: 120, search: true }
    ],
    toolbar: [true, "top"], // 启用顶部工具栏
    toolbarfilter: true, // 开启工具栏筛选功能
    autowidth: true, // 表格自动适应宽度
    height: "auto",
    pager: "#pager",
    rowNum: 10,
    rowList: [10, 20, 50],
    viewrecords: true,
    caption: "用户管理表格"
});

// 初始化搜索工具栏配置
$("#grid").jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false, // 输入时即时搜索，无需回车
    defaultSearch: "cn" // 默认模糊匹配
});

2. 监听尺寸变化并处理搜索字段 #

下面是核心的事件监听和处理逻辑，包含两种需求的实现：

// 防抖函数：避免resize事件频繁触发，优化性能
function debounce(func, delay = 300) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// 尺寸变化时的处理函数
function handleGridResize() {
    const $grid = $("#grid");
    if (!$grid.length) return;

    // --- 需求1：调整尺寸时自动清空搜索字段 ---
    $grid.jqGrid('clearToolbar'); // 清空顶部搜索工具栏的所有输入和筛选状态

    // --- 需求2：调整尺寸时保留筛选功能（替代上面的clearToolbar）---
    // 如果希望调整尺寸后筛选仍正常工作，注释上面的clearToolbar，改用下面的代码：
    // const postData = $grid.jqGrid('getGridParam', 'postData');
    // // 判断是否存在筛选条件，若有则重新加载表格确保筛选生效
    // if (postData.filters) {
    //     $grid.jqGrid('setGridParam', { page: 1 }).trigger('reloadGrid');
    // }

    // 可选：如果表格在自定义容器中，手动调整表格宽度适配容器
    const containerWidth = $grid.parent().width();
    $grid.jqGrid('setGridWidth', containerWidth);
}

// 绑定窗口resize事件，使用防抖优化
$(window).on('resize', debounce(handleGridResize));

3. 针对高级搜索的调整 #

如果你使用的是jqGrid的高级搜索对话框（通过searchGrid触发），那么清空搜索条件需要改用clearSearch方法：

// 在handleGridResize函数中替换clearToolbar为：
$grid.jqGrid('clearSearch');

关键说明 #

• 防抖函数：设置300ms延迟是比较合理的，既不会让用户感觉到延迟，又能避免频繁触发事件导致的性能损耗，你可以根据实际需求调整这个值。
• clearToolbar vs clearSearch：前者用于清空顶部的搜索工具栏，后者用于清空高级搜索对话框的条件，根据你的搜索方式选择对应的方法。
• 保留筛选的逻辑：当调整尺寸后，有时候表格的渲染可能会出现异常，重新加载表格可以确保筛选条件依然生效，同时重置页码到第一页。

内容的提问来源于stack exchange，提问作者Shivam Varshney