使用 json 填充剑道树视图答案

【问题标题】：Kendo tree view populate using json使用 json 填充剑道树视图
【发布时间】：2014-04-04 07:15:35
【问题描述】：

我是剑道 ui 的新手。我想填充树视图。我的Json格式是这样的：-----

         {
        "GetMenu": [
          {
            "OutletCode": "BOL",
            "MenuGroup": [
              {
                "ParentId": 1,
                "ItemName": "BEER",
                "Items": [
                  {
                    "ItemId": 239,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN PINT BEER",
                    "Price": "35.000"
                  },
                  {
                    "ItemId": 241,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN BOTLLE",
                    "Price": "35.000"
                  }
                ]
              },
              {
                "ParentId": 2,
                "ItemName": "BREEZERS",
                "Items": [
                  {
                    "ItemId": 110,
                    "ParentId": 2,
                    "ItemName": "BACARDI BREEZER",
                    "Price": "35.000"
                  }
                ]
              }
            ]
          }
        ]
      }

在treeView中我想要输出类似的东西：---

我只想要这样的最终树视图。

注意：--> 为了节省空间，我从 json 中转义了一些值，如下所示：

 R BOTLLE
 AMSTEL LIGHT BOTTLE
 FOSTER BOTLLE
 KINGFISHER BEER BOTTLE
 HEINEKEN CAN BEER

我只想用 javascript 或 jquery 回答。

也许我可以用原来的剑道覆盖。

如果之前问过此类问题，请告诉我链接.... 在此先感谢

【问题讨论】：

标签： javascript jquery kendo-ui kendo-treeview

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

<script>
// Your Json Data
var jsondata = {
        "GetMenu": [
          {       
            "OutletCode": "BOL",
            "MenuGroup": [

              {
                "ParentId": 1,
                "ItemName": "BEER",
                "Items": [
                  {
                    "ItemId": 239,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN PINT BEER",
                    "Price": "35.000"
                  },
                  {
                    "ItemId": 241,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN BOTLLE",
                    "Price": "35.000"
                  }
                ]
              },
              {
                "ParentId": 2,
                "ItemName": "BREEZERS",
                "Items": [
                  {
                    "ItemId": 110,
                    "ParentId": 2,
                    "ItemName": "BACARDI BREEZER",
                    "Price": "35.000"
                  }
                ]
              }
            ],
         }]
      };


var testArray = new Array();
var testObject = new Object(); 
testObject.ItemName = jsondata.GetMenu[0].OutletCode;
testObject.Items =  jsondata.GetMenu[0].MenuGroup;
testArray.push(testObject);



$( document ).ready(function() {  

var inlineDefault = new kendo.data.HierarchicalDataSource({
                    data: testArray,
                    schema: {
                        model: {
                                children: "Items"
                        }
                    }
                });

                $("#treeview-left").kendoTreeView({
                    dataSource: inlineDefault ,
            dataTextField: "ItemName",

                });
}); 

</script>

</head>
<body>
<div>
  <div id="treeview-left"></div>
</div>
</body>
</html>

http://jsfiddle.net/ivyansh9897/QgV53/1/ 如果有任何问题，请告诉我。

【讨论】：

谢谢杰伊什。但是在这个结构中的 OutletCode 节点不是他们的。您可以看到第一个节点是 BOL，即 OutletCode。
你能告诉我应该从哪个行号开始调试剑道 ui
我已经更新了我上面的代码sn-p。请检查一下，如果有任何问题，请告诉我。
感谢 jayesh ji 在此之前工作，我不知道对象数组也可以在这里工作，谢谢。我会赞成你的回答。 RAM RAM 老板
您的 Json 结果不是 KendoTreeView 的有效数据源，这就是我修改您的 json 结果的原因。如果上述代码 sn-p 的任何部分无法理解，请告诉我。

【解决方案2】：

<div id="treeview"></div>
<script>
            var dataSource = new kendo.data.HierarchicalDataSource({
                data: [
                  { text: "BOL",expanded:true, items: [
                          { text: "Beer",expanded:true,items:[{
                              text:"HEINEKEN CAN BEER"},
                              {text:" KINGFISHER BEER BOTTLE"}] 
                          },
                    { text: "Breezers",expanded:true,items:[{
                              text:"HEINEKEN CAN Breezer"},
                              {text:" KINGFISHER Breezer BOTTLE"}] 
                          },
                      ]
                    },]
            });

            $("#treeview").kendoTreeView({
                dataSource: dataSource 
            });


        </script>

【讨论】：

我需要按原样传递我的 json。
你能告诉我应该从哪个行号开始调试剑道 ui。
在提交时尝试 JSON.stringify($('#treeview').data('kendoTreeView').dataSource)
你会得到字符串格式的json数据，你可以提交给控制器