JQuery 和 ASP.NET MVC json 输出 kendo 树视图

Question

嘿，我遇到了 Kendo UI for ASP.net MVC 的问题，混合了 jQuery 用于数据检索。

我当前的 treeview 看起来像这样：

但是，我希望它看起来更像这样：

我必须使用的 JSON 结构如下所示：

{
"meta": {
    "total_results": 193,
    "offset": 0,
    "total_pages": 1
},
"object_list": [{
        "Name": "facebook",
        "Description": null,
        "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    }, {
        "Name": "twitter",
        "Description": null,
        "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    },  {
        "Name": "Google",
        "Description": null,
        "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Search Engines"
    }, {
    ...ETC...

看起来需要将其格式化为如下所示：

$("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },

     check: onCheck,

     dataSource: [{
         id: 1, text: "Categories", expanded: true, spriteCssClass: "rootfolder", items: 
         [{
             id: 2, text: "Social Networks", expanded: true, spriteCssClass: "folder", 
             items: [
                { id: 3, text: "facebook", spriteCssClass: "html" },
                { id: 4, text: "twitter", spriteCssClass: "html" },
                { id: 5, text: "WhatsApp", spriteCssClass: "image" },
                { id: 6, text: "instagram", spriteCssClass: "image" },
                { id: 7, text: "wechat", spriteCssClass: "image" }
             ]}, {
             id: 8, text: "Search Engines", expanded: true, spriteCssClass: "folder", 
              items: [
                 { id: 9, text: "Google", spriteCssClass: "image" },
                 { id: 10, text: "Yahoo!", spriteCssClass: "pdf" }
              ]}
        ]
    }]
});

所以我的问题 - 由于我无法修改发送给我的 JSON，因此我如何将其转换为正确的 treeview 结构格式？乙醚溶液（JQuery 或 ASP.net MVC）会很好。

任何帮助都会很棒！

更新

Answer 1

好消息是您实际上可以使用 dataSource.schema.parse 事件更改 Api 数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script></head>
<body>
  <div id="treeview"></div>
  <script>
    let apiData = {
    "meta": {
        "total_results": 193,
        "offset": 0,
        "total_pages": 1
    },
    "object_list": [{
            "Name": "facebook",
            "Description": null,
            "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        }, {
            "Name": "twitter",
            "Description": null,
            "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        },  {
            "Name": "Google",
            "Description": null,
            "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Search Engines"
        }]
    };
      
    $("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },
     dataSource: {
       data: apiData,
       schema: {
         model: {
           children: 'items'
         },
         parse: (data) => {
           // The new data array to be used by treeview
           let newData = [];
           
           data.object_list.forEach(item => {
             // Look for an already created parent for that categoty
             let parent = newData.find(parentItem => parentItem.text === item.Cat);
             
             // If not found...
             if (!parent) {
               // ... create a new one...
               parent = {
                 id: 2,
                 text: item.Cat,
                 expanded: true,
                 items: [],
                 spriteCssClass: "folder"
               };
               
               // ... and add it to the final data array.
               newData.push(parent);
             }
             
             // Add the new item to the parent
             parent.items.push({
               id: 3,
               text: item.Name, 
               spriteCssClass: "image"
             });
           });
           
           // Return the root object with its new child items
           return [{
             id: 1, 
             text: 'Categories', 
             expanded: true,
             spriteCssClass: "rootfolder",
             items: newData
           }];
         }
       }
     }
  });
  </script>
</body>
</html>

Dojo

JQuery 和 ASP.NET MVC json 输出 kendo 树视图

JQuery and ASP.NET MVC json output for kendo treeview

javascript

asp.net-mvc

jquery

kendo-ui

kendo-treeview