jsGrid筛选触发多次服务器请求，如何实现客户端本地筛选？

嘿Mike，我正好处理过类似的场景，这就给你梳理清楚怎么搞定！

首先：客户端数据存在哪里？ #

jsGrid的实例本身就存储着已加载的本地数据，你可以通过以下方式获取：

// 获取你的jsGrid实例的当前数据
let currentGridData = $("#your-grid-id").jsGrid("option", "data");

不过更稳妥的是在第一次加载数据时，把完整数据集存到一个全局变量里，方便后续筛选使用。

核心思路：修改loadData方法，优先使用本地数据 #

默认情况下，开启筛选后每次输入筛选条件，jsGrid都会调用loadData方法。我们要改造这个方法，让它只在第一次加载时请求服务器，之后都基于本地数据做筛选。

具体实现步骤：

1. 先声明一个变量存储完整的服务器返回数据：

// 全局变量，存储从服务器拿到的所有数据
let fullGridDataset = [];

2. 改造loadData方法，区分首次加载和后续筛选：

$("#your-grid-id").jsGrid({
    width: "100%",
    height: "auto",
    filtering: true, // 开启筛选功能
    autoload: true, // 自动加载初始数据
    // 其他基础配置...

    loadData: function(filter) {
        // 判断是否已经加载过完整数据
        if (fullGridDataset.length > 0) {
            // 基于本地数据执行筛选逻辑
            let filteredResult = fullGridDataset.filter(item => {
                // 这里根据你的列编写筛选规则，示例以name列为例
                let matchesName = !filter.name || item.name.toLowerCase().includes(filter.name.toLowerCase());
                // 如果有多列筛选，就用&&拼接多个条件，比如：
                // let matchesAge = !filter.age || item.age === filter.age;
                // return matchesName && matchesAge;
                return matchesName;
            });
            // 返回筛选后的结果（用Promise.resolve包装，符合jsGrid的异步要求）
            return Promise.resolve(filteredResult);
        } else {
            // 首次加载：向服务器请求数据
            return $.ajax({
                type: "POST",
                url: "/your-server-api",
                data: filter, // 初始请求如果不需要筛选可以传空对象
                dataType: "json"
            }).done(function(serverData) {
                // 把服务器返回的完整数据存到全局变量
                fullGridDataset = serverData;
            });
        }
    },

    // 你的列配置示例
    fields: [
        { name: "name", type: "text", filtering: true, width: 150 },
        { name: "email", type: "text", filtering: true, width: 200 },
        { type: "control", width: 100 }
    ]
});

额外提示 #

• 如果你的筛选逻辑比较复杂（比如范围筛选、多条件组合），可以把筛选逻辑抽成单独的函数，让代码更清晰。
• 要是后续需要刷新服务器数据（比如新增/修改后），只需要重新请求服务器，更新fullGridDataset变量，再调用$("#your-grid-id").jsGrid("loadData")即可。

这样修改后，用户输入筛选条件时就不会再触发服务器请求了，完全基于本地已加载的数据做过滤，速度会快很多！

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