Question

我是kendo 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中我想要输出类似的东西：---

enter image description here

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

注意： - ＆GT;为了节省空间我从json中逃脱了一些价值：

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

我只想在javascript或jquery中回答。

可能是我可以覆盖原始的kendoui。

如果此类问题在此之前提出，请告诉我链接.... 提前谢谢

Answer 1

请尝试使用以下代码段。

<!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/ 如果有任何疑虑，请告诉我。

Answer 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填充Kendo树视图

2 个答案: