Kendo UI Treeview和JSON [英] Kendo UI Treeview and JSON
问题描述
所以我想用kendo UI treeview项目创建一个Tree并将其绑定到作为JSON文件的远程Hierarchical Data Source.
我希望生成的树类似于:
(车辆)
-(汽车)
---- FM-1100
---- FM-4200
-(自行车)
---- FM-3100
(人员)
-(客户)
---- GH-3000
-(VIP)
---- GH-3100
PS. ()中的名称应该类似于包含其子级"的文件夹
我已经在kendo ui网站上查看了有关上述所有内容的文档，但是我对树视图用于在每次扩展树中的项目时加载更深阶段的整个回调函数感到有些困惑. >
让我们以kendo文档中的示例为例:
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/Employees",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({dataSource: homogeneous});
JSON样本数据:
{
"employees": [
{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":3,"FullName":"Carl Jenkins","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":4,"FullName":"Aston Miller","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":5,"FullName":"Damon Sherbands","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":6,"FullName":"Dariel Hanks","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":7,"FullName":"Jason Jackson","HasEmployees":false,"ReportsTo":3},
{"EmployeeId":8,"FullName":"Reylen Scribbs","HasEmployees":false,"ReportsTo":6}
]
}
因此，我必须在"http://demos.kendoui.com/service/Employees"上设置一个休息服务器，该服务器接受提供"EmployeeId"的树中的GET，然后在文件中进行搜索并返回那些"ReportTo"收到"EmployeeId"的人...? 树想要显示初始节点的点火时间会怎样?
类似的东西:
@Path("/Employees")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnEmployees(@QueryParam("EmployeeId") int accID) {
//search the employees.json
return "<head></head><body><pre>" + searchResultsString + "</pre></body>";
}
如何有效搜索JSON文件并以字符串形式返回所有结果? 或者，如果所有这些都不对，那么有人可以帮助我理解所有的GET和回调内容吗?也许与我听说过的jsonp有关?在这里有些失落.
预先感谢
您是否可以创建具有以下结构的JSON文件(类似于您以XML格式提出的结构)?
[
{
"id" :100,
"text" :"tree",
"items":[
{
"id" :1,
"text" :"Vehicle",
"items":[
{
"id" :2,
"text" :"Cars",
"items":[
{
"id" :3,
"text":"FM-1100"
},
{
"id" :4,
"text":"FM-4200"
}
]
},
{
"id" :5,
"text" :"Bikes",
"items":[
{
"id" :6,
"text":"FM-3100"
}
]
}
]
},
{
"id" :7,
"text" :"Personnel",
"items":[
{
"id" :8,
"text" :"Personnel",
"items":[
{
"id" :9,
"text" :"Clients",
"items":[
{
"id" :10,
"text":"GH-3000"
}
]
},
{
"id" :11,
"text" :"VIPs",
"items":[
{
"id" :12,
"text":"GH-3100"
}
]
}
]
}
]
}
]
}
]
每个元素都有一个在树中显示的id和text以及一个包含树中每个子元素的数组items.
如果是，则您的代码应为:
$.getJSON("/testTree.json", function (data) {
$("#treeview").kendoTreeView({
dataSource: data
});
})
/testTree.json是JSON文件的网址.
So I want to create a Tree with kendo UI treeview item and bind it to a remote Hierarchical Data Source being a JSON file.
I want the resulting tree to be something like:
(Vehicles)
--(Cars)
----FM-1100
----FM-4200
--(Bikes)
----FM-3100
(Personnel)
--(Clients)
----GH-3000
--(VIPs)
----GH-3100
PS. Names in () are supposed to be something like folders containing their "children"
I've checked the documentation about all the above in the kendo ui website but I'm a bit confused with the whole callback function the treeview uses to load the deeper stages everytime you expand an item in the tree..
Let's take the example in kendo documentation for instance:
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/Employees",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({dataSource: homogeneous});
JSON sample data:
{
"employees": [
{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":3,"FullName":"Carl Jenkins","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":4,"FullName":"Aston Miller","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":5,"FullName":"Damon Sherbands","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":6,"FullName":"Dariel Hanks","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":7,"FullName":"Jason Jackson","HasEmployees":false,"ReportsTo":3},
{"EmployeeId":8,"FullName":"Reylen Scribbs","HasEmployees":false,"ReportsTo":6}
]
}
So,I have to setup a rest server on "http://demos.kendoui.com/service/Employees" that accepts a GET from the tree which provides the "EmployeeId" and then does a search inside the file and returns those who "ReportTo" the "EmployeeId" recieved...?? And what happens the firt time the tree wants to show the initial nodes?
Something like:
@Path("/Employees")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnEmployees(@QueryParam("EmployeeId") int accID) {
//search the employees.json
return "<head></head><body><pre>" + searchResultsString + "</pre></body>";
}
How do I search efficiently a JSON file and return all the results in a String? Or if all these are wrong can someone help me understanding all the GET and the callback stuff?Maybe it does have to do with jsonp I've heard about?A bit lost here..
Thanks in advance
Are you able to create a JSON file with the following structure (similar to what you propose in XML format)?
[
{
"id" :100,
"text" :"tree",
"items":[
{
"id" :1,
"text" :"Vehicle",
"items":[
{
"id" :2,
"text" :"Cars",
"items":[
{
"id" :3,
"text":"FM-1100"
},
{
"id" :4,
"text":"FM-4200"
}
]
},
{
"id" :5,
"text" :"Bikes",
"items":[
{
"id" :6,
"text":"FM-3100"
}
]
}
]
},
{
"id" :7,
"text" :"Personnel",
"items":[
{
"id" :8,
"text" :"Personnel",
"items":[
{
"id" :9,
"text" :"Clients",
"items":[
{
"id" :10,
"text":"GH-3000"
}
]
},
{
"id" :11,
"text" :"VIPs",
"items":[
{
"id" :12,
"text":"GH-3100"
}
]
}
]
}
]
}
]
}
]
Where each element has an id a text that is what will show up in the tree and an array items containing each subelement of the tree.
If so, your code should be:
$.getJSON("/testTree.json", function (data) {
$("#treeview").kendoTreeView({
dataSource: data
});
})
Where /testTree.json is the URL of your JSON file.
这篇关于Kendo UI Treeview和JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
