如何对Kendo UI jQuery TreeView各父项下的子项按A-Z排序

我需要实现Kendo UI jQuery TreeView中每个分类下的子项名称按A-Z顺序排序。

目前我的TreeView效果如下图所示：

我期望实现的排序效果如下图所示：

传入的JSON数据格式如下（示例简化了部分分类），原始数据没有预设排序：

[{
        "Name": "AU",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Gitlab",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "B",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHubCommits",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHub",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Re",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ir",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ru",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveA",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveH",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    },
    ......
]

我已经通过以下代码实现了分类名称本身的A-Z排序：

dataSource: {
   data: resultData,
   schema: {
       model: {
          children: 'items'
       },
       parse: (data) => {
          let newData = [];

           // 分类名称按A-Z排序
           data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);

           data.forEach(item => {
              let parent = newData.find(parentItem => parentItem.text === item.Category);

              if (!parent) {
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

           return [{
              id: 1,
              text: 'Categories',
              expanded: true,
              items: newData
           }];
       }
   }
 }
});

我尝试添加了如下配置对子项排序，但没有生效：

sort: {
   field: "Name", 
   dir: "asc"
}

解决方法 #

你添加的sort配置未生效，是因为你在parse方法中手动重组了树形结构，数据源的全局排序规则不会自动作用于生成的子项数组，按以下方式修改代码即可生效：

在parse方法的forEach循环结束后、返回最终数据之前，遍历所有分类节点，对其items数组按子项显示名称升序排序，修改后的完整parse代码如下：

parse: (data) => {
    let newData = [];

    // 分类名称按A-Z排序
    data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);

    data.forEach(item => {
        let parent = newData.find(parentItem => parentItem.text === item.Category);
        if (!parent) {
            parent = {
                id: 2,
                text: item.Category,
                expanded: true,
                items: [],
                imageUrl: "" + item.Icon + ""
            };
            newData.push(parent);
        }
        parent.items.push({
            id: 3,
            text: item.Name,
            imageUrl: "" + item.Icon + ""
        });
    });

    // 新增：对每个分类下的子项按名称A-Z排序
    newData.forEach(category => {
        category.items.sort((a, b) => a.text.localeCompare(b.text));
    });

    return [{
        id: 1,
        text: 'Categories',
        expanded: true,
        items: newData
    }];
}

如果需要适配多语言排序，可以给localeCompare传入对应语言参数，比如中文排序传入'zh-CN'即可。

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