JsGrid自定义列排序功能失效问题求助

我帮你定位到问题所在啦，你自定义的"Client Name"列排序失效，核心原因是没有指定name属性，同时headerTemplate的写法有点冗余，导致jsGrid没法正确关联排序字段和绑定排序事件。

问题分析 #

• jsGrid的排序功能依赖列的name属性关联数据源中的对应字段，你的"Client Name"列没有设置name，排序逻辑找不到要比较的字段值，自然无法正常工作。
• 手动写headerTemplate返回<th>标签时，没有保留jsGrid自动添加的排序相关类和事件绑定，这也会影响排序交互的触发。

修复方案 #

只需要做两个小修改就能解决：

1. 给自定义列添加name: "Client"，明确指定排序对应的数据源字段；
2. 简化headerTemplate，直接返回标题文本即可（jsGrid会自动处理标签和排序交互元素）。

修复后的完整代码 #

$("#jsGrid").jsGrid({
    width: "100%",
    sorting: true,
    paging: true,
    data: [
        { ClientId: 1, Client: "Aaaa Joseph" },
        { ClientId: 2, Client: "Zzzz Brad" },
        { ClientId: 3, Client: "Mr Nice Guy" }
    ],
    fields: [
        { 
            width: 80, 
            name: "ClientId", 
            type: "text", 
            title: "Client ID" 
        },
        { 
            width: 80,
            name: "Client", // 关键：指定排序关联的字段
            itemTemplate: function(value, item) {
                return "<div>" + item.Client + "</div>";
            },
            headerTemplate: function() {
                return "Client Name"; // 简化写法，jsGrid自动生成带排序功能的表头
            }
        }
    ]
});

额外说明 #

如果你确实需要自定义表头的HTML结构（比如添加额外样式），也可以在headerTemplate里保留jsGrid的排序相关类，示例如下：

headerTemplate: function() {
    return "<th class='jsgrid-header-cell jsgrid-sortable-header'>Client Name</th>";
}

不过只要指定了name属性，即使不手动添加这些类，jsGrid也会自动为可排序的表头加上必要的样式和事件，所以一般不需要这么麻烦。

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