我是 kendo ui 的新手。我想填充 Treeview 。 我的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 中我想输出类似的东西:---
我只想要这样的最终 Treeview 。
注意:--> 为了节省空间，我从 json 中转义了一些值，如下所示:
R BOTLLE
AMSTEL LIGHT BOTTLE
FOSTER BOTLLE
KINGFISHER BEER BOTTLE
HEINEKEN CAN BEER
我只想要 javascript 或 jquery 的答案。
也许我可以在原来的kendoui中覆盖。
如果之前问过此类问题，请告诉我链接...... 提前致谢
最佳答案
请尝试使用以下代码片段。
<!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/ 如果有任何疑问，请告诉我。
关于javascript - Kendo Treeview 使用 json 填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22856073/