Блог

Главная - Вопросы по программированию - jQuery и ASP.NET Вывод MVC json для kendo treeview

jQuery и ASP.NET Вывод MVC json для kendo treeview

#javascript #jquery #asp.net-mvc #kendo-ui #kendo-treeview

Вопрос:

Эй, все, у меня проблема с пользовательским интерфейсом Kendo для ASP.net MVC с добавлением jQuery для поиска данных.

Мой текущий вид дерева выглядит так:

введите описание изображения здесь

Тем не менее, я хочу, чтобы это выглядело примерно так:

введите описание изображения здесь

Моя структура 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" }
              ]}
        ]
    }]
});

Итак, мой вопрос — как мне перевести его в правильный формат структуры treeview, как указано выше, поскольку я не могу изменить отправляемый мне JSON? Растворение эфира (jQuery или ASP.net MVC) будет в порядке.

Любая помощь была бы великолепна!

Обновить

введите описание изображения здесь

Ответ №1:

Хорошей новостью является то, что вы действительно МОЖЕТЕ изменить данные Api с помощью dataSource.schema.parse события:

 <!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>

Додзе

Комментарии:

1. Большое спасибо! Однако при запуске моего кода, похоже, ошибка Не может прочитать свойство «forEach» неопределенного значения из-за «списка объектов»: отсутствует в окончательном JSON, который находится внутри анализа данных. Проверьте мою операцию, чтобы увидеть, как выглядит мой JSON при выполнении console.log(данные) .

Метки: