JsGrid刷新时如何保持表格排序状态？

我之前也碰到过这个情况，jsGrid默认在刷新时不会自动保留排序状态，得咱们手动把排序信息存下来再传递给数据加载流程才行。下面给你一步步的解决方案：

核心思路 #

在每次刷新前，先获取当前表格的排序字段和排序方向，然后把这两个参数和过滤参数一起传给loadData函数，最后在数据加载完成后，重新把排序状态应用到表格上，确保表头的排序箭头也能正确显示。

具体实现步骤 #

1. 编写刷新函数，保存并传递排序状态

首先，咱们写一个专门的刷新函数，用来处理排序状态的保存和传递：

// 保存定时器实例，方便后续清除
let refreshTimer;

function refreshGrid() {
    // 获取jsGrid的实例对象
    const grid = $("#jsGrid").data("jsGrid");
    
    // 拿到当前的过滤条件、排序字段和排序方向
    const currentFilter = grid.getFilter();
    const currentSortField = grid.sortField;
    const currentSortOrder = grid.sortOrder;

    // 加载数据时，把排序参数和过滤参数一起传进去
    grid.loadData({
        ...currentFilter,
        sortField: currentSortField,
        sortOrder: currentSortOrder
    }).done(() => {
        // 数据加载完成后，重新应用排序状态，确保UI正确
        if (currentSortField) {
            grid.sort(currentSortField, currentSortOrder);
        }
    });
}

// 初始化定时器，每5秒刷新一次表格
refreshTimer = setInterval(refreshGrid, 5000);

2. 修改controller的loadData函数，处理排序参数

接下来要根据你的数据来源（前端本地数据/后端接口），在loadData里处理排序参数：

情况一：前端本地数据排序

如果你的数据是前端本地的数组，就在loadData里用传递过来的sortField和sortOrder对数据进行排序：

controller: {
    loadData: function(filter) {
        const dfd = $.Deferred();
        // 假设这是你的原始数据源
        let data = [...yourLocalDataSource];

        // 先处理过滤逻辑（你原来的过滤代码保留）
        if (filter.yourFilterField) {
            data = data.filter(item => item.yourFilterField.includes(filter.yourFilterField));
        }

        // 处理排序逻辑
        if (filter.sortField) {
            data.sort((a, b) => {
                if (a[filter.sortField] < b[filter.sortField]) {
                    return filter.sortOrder === "asc" ? -1 : 1;
                }
                if (a[filter.sortField] > b[filter.sortField]) {
                    return filter.sortOrder === "asc" ? 1 : -1;
                }
                return 0;
            });
        }

        dfd.resolve(data);
        return dfd.promise();
    }
}

情况二：后端接口排序

如果数据是从后端接口获取的，就把sortField和sortOrder作为请求参数传给后端，让后端返回已经排序好的数据：

controller: {
    loadData: function(filter) {
        // 把过滤和排序参数拼到请求里
        return $.ajax({
            type: "GET",
            url: "/your-api-url",
            data: filter, // 这里已经包含了sortField和sortOrder
            dataType: "json"
        });
    }
}

这时候需要确保后端接口能正确接收这两个参数，并返回排序后的结果。

3. 初始化时设置默认排序（可选）

如果你的表格有默认排序需求，可以在初始化的时候直接指定：

$("#jsGrid").jsGrid({
    height: "300px",
    width: "100%",
    filtering: true,
    sorting: true,
    paging: true,
    autoload: true,
    pageSize: 10,
    // 设置默认排序字段和方向
    sortField: "yourDefaultSortField",
    sortOrder: "asc",
    // 其他配置...
    controller: {
        // 你的loadData函数...
    }
});

注意事项 #

• 如果后续需要停止刷新，记得调用clearInterval(refreshTimer)清除定时器。
• 确保你的排序字段在数据源中存在，避免出现错误。

内容的提问来源于stack exchange，提问作者J.H