对 Kendo UI Jquery 树视图 child 项目进行排序，每个 parent 项目 A-Z

Question

嘿，我正在尝试找到 order/sort 我的 child 名字的正确方法，顺序是 A-Z。

目前我的树视图是这样的：

这就是我想要的排序方式：

数据通过 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
    },.........
]

请注意，上面的 JSON 没有任何顺序，还有其他类别，但为了简单起见，我将它们排除在外。类别名称本身是我按顺序排列的：

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

           //Re-order catagory names 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) {
                 //The beginning of the tree category
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 //Each "child" under the above category
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

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

我如何使用上面的代码对每个类别名称下的 child 项进行排序？

我已经尝试将此添加到代码中：

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

但这似乎没有任何作用？

Answer 1

添加这个：

newData.forEach(item => {
    if (item.items || item.items.length) {
        item.items.sort((a, b) => (a.text > b.text) ? 1 : -1);
    }
});

...在 parse 事件中的 return 之前。

演示：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">

    <div class="demo-section k-content">
        <div>
            <div id="treeview-left"></div>
        </div>
    </div>

    <script>
        var inlineDefault = new kendo.data.HierarchicalDataSource({
            data: [{
                "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
            }],
          schema: {
           model: {
              children: 'items'
           },
           parse: (data) => {
              let newData = [];

               //Re-order catagory names 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) {
                   //The beginning of the tree category
                   parent = {
                       id: 2,
                       text: item.Category,
                       expanded: true,
                       items: [],
                       imageUrl: "" + item.Icon + ""
                   };

                   newData.push(parent);
                }

                parent.items.push({
                   //Each "child" under the above category
                   id: 3,
                   text: item.Name,
                   imageUrl: "" + item.Icon + ""
                });
             });
             
             newData.forEach(item => {
               if (item.items || item.items.length) {
                item.items.sort((a, b) => (a.text > b.text) ? 1 : -1);
               }
             });

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

        $("#treeview-left").kendoTreeView({
            dataSource: inlineDefault
        });
    </script>

    <style>
        .demo-section{
            display:flex;
            justify-content:space-evenly;
        }
    </style>
</div>


    

</body>
</html>

Dojo

请注意，在常见的文本排序中，GitHub提交 永远不会排在GitHub 之上。另请注意，我建议的代码仅适用于一个级别的项目，对于更多级别，它需要递归。

对 Kendo UI Jquery 树视图 child 项目进行排序，每个 parent 项目 A-Z

Sorting Kendo UI Jquery treeview child items in each parent item A-Z

javascript

jquery

sorting

kendo-ui

kendo-treeview