如何在jsGrid中实现服务端排序，保留表头点击并禁用客户端排序

嘿，我来帮你搞定这个问题！其实只要调整两个核心点就能实现需求：一是保留表头的点击交互但禁用客户端排序逻辑，二是确保过滤和排序参数能一起传给服务端做联合处理。下面一步步来：

1. 保留表头点击，禁用客户端排序 #

你说的没错，直接设sorting: false会把表头的点击事件也去掉，这不是我们想要的。正确的做法是开启sorting: true，但拦截默认的客户端排序行为，让点击表头只触发服务端的数据请求。

我们可以在jsGrid的配置里添加onSorting事件，在这个事件里阻止默认操作，然后手动调用数据加载：

onSorting: function(args) {
    // 阻止客户端自己执行排序逻辑
    args.cancel = true;
    // 手动触发数据加载，此时的filter已经包含了当前的排序参数
    this.loadData(this.getFilter());
}

2. 修正loadData方法，确保参数正确传递 #

你的原代码里有个小问题：当还没点击排序的时候，sorting变量会是undefined，传给服务端会出问题。另外，我们要确保不管有没有过滤或排序条件，参数都能正确组装。

修改后的loadData方法如下：

loadData: function(filter) {
    var d = $.Deferred();
    var bFilter = [];
    // 初始化排序参数，避免出现undefined的情况
    var sorting = {};

    // 遍历filter，分离过滤和排序参数
    for (var prop in filter) {
        if (prop === "sortField" && filter[prop]) {
            sorting.Name = filter.sortField;
            // 给排序方向设置默认值，避免服务端收到空值
            sorting.Type = filter.sortOrder || "asc";
        } else if (prop === "sortOrder") {
            // 已经在上面处理过，这里直接跳过
            continue;
        } else if (filter[prop]) {
            // 只收集有值的过滤参数，避免传递空的过滤条件
            bFilter.push({
                "Name": prop,
                "Value": filter[prop]
            });
        }
    }

    // 发送请求到服务端，注意指定POST方法和contentType，否则JSON参数可能无法正确传递
    $.ajax({
        url: "http://abc/abc",
        dataType: "json",
        method: "POST",
        contentType: "application/json",
        data: JSON.stringify({
            "filter": bFilter,
            "sorting": sorting
        })
    }).done(function(response) {
        d.resolve(response.value);
    }).fail(function() {
        // 添加失败提示，提升用户体验
        d.reject("加载数据失败，请稍后重试");
    });

    return d.promise();
}

3. 完整的整合代码 #

把上面的修改整合到你的代码里，最终的jsGrid配置是这样的：

var db = {
    loadData: function(filter) {
        var d = $.Deferred();
        var bFilter = [];
        var sorting = {};

        for (var prop in filter) {
            if (prop === "sortField" && filter[prop]) {
                sorting.Name = filter.sortField;
                sorting.Type = filter.sortOrder || "asc";
            } else if (prop === "sortOrder") {
                continue;
            } else if (filter[prop]) {
                bFilter.push({
                    "Name": prop,
                    "Value": filter[prop]
                });
            }
        }

        $.ajax({
            url: "http://abc/abc",
            dataType: "json",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                "filter": bFilter,
                "sorting": sorting
            })
        }).done(function(response) {
            d.resolve(response.value);
        }).fail(function() {
            d.reject("加载数据失败，请稍后重试");
        });

        return d.promise();
    },
};

$("#jsGrid").jsGrid({
    height: 300,
    width: "100%",
    filtering: true,
    editing: true,
    sorting: true, // 必须开启这个，表头才有点击交互
    paging: true,
    autoload: true,
    pageSize: 2,
    pageButtonCount: 5,
    deleteConfirm: "Do you really want to delete the client?",
    controller: db,
    onSorting: function(args) {
        // 阻止客户端排序，交给服务端处理
        args.cancel = true;
        // 重新加载数据，此时filter包含了当前的过滤和排序参数
        this.loadData(this.getFilter());
    },
    fields: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { type: "control" }
    ]
});

核心要点总结 #

• 保留表头点击：通过sorting: true开启表头交互，再用onSorting事件阻止客户端排序，转而触发服务端请求。
• 联合处理逻辑：loadData会同时收集当前的过滤和排序参数，一起传给服务端，服务端只需要根据这两个参数做联合的过滤+排序操作就行。
• 参数健壮性：添加了默认值和空值过滤，避免传递无效参数给服务端。

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