可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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
回答1:
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.
回答2:
Actually below logic description will generate self reference table as JSON format and then it passes its content to treeview data source.
I have generated this method for below data model which illustrates there are personals in organization who maybe has manager or employer, if your data base is difference you should look at code and change a little on that.
namespace Treeview.Models
{
public class Personal
{
public int ID { get; set; }
public int Parent_ID { get; set; } //reportsto field
public string Name { get; set; }
}
}
To generate hierarchical Data Source as JSON file follow this steps and for full explanation follow the link:
step 1: make a nested method so called Treeview
public string Treeview(int itemID, string mystr, int j, int flag)
which its output is json as string and get
1.1: itemID --> ID for current node
1.2: mystr --> previous json string
{in every self call this method , new string will be added to mystr}
1.3: j is inner counter
1.4: flag is illustrated if current node has child or not
step 2: First one you call this method from your action in mvc or other part of your application call like that Treeview(0,””,0,0)
2.1: Assume you do not know the current node so itemid is equal to zero
2.2: At first time you do not have any string for json
2.3: j = 0 as the same token
2.4: flag = 0 as the same token
step 3: Check this current node has parent or not ?
3.1: Main node root: if you are just enter to this method so assume you have to
select from data base
nodes which has no parents and their parent id is equal to NULL
here generate your json string like mystr = "["
3.2 Nested node : if this method has been called for more than once check all node
which their parent is equal to itemid
here generate your json string like mystr = ",item:["
step 4: Now you have a list of data which you have tried from third step
4.1: Make a foreach loop and call each node and write it like
4.2:
foreach (item in querylist)
mystr = { id: “” , text: “”
4.3: Inside this loop check this node has child or not?
Querylist= select personal where reportsto=item.id
4.3.1: **(It has child)** --> call again Treeview method such as
<code> mystr = Treeview (item.id, mystr, i,1) </code>
Now your item.id is crrent node, mystr is the whole string which is generated
until now i as j and flag is equal to one due to this node is parent and
has child
4.3.2: **(It has No Child && this node is not last node)**
**mystr =" }, "**
4.3.3: **(It has No Child && this node is last node)**
4.3.3.1: Count number of parent of this node
Foreach parent put **mystr = "}]"**
4.3.3.2: Count number of child of parent of this node
4.3.3.2.1: if (Child = 0) **mystr = "}]"**
4.3.3.2.2: if (Child > 0) **mystr = "}]"**
4.3.3.2.2.1: if (This node is the last child node
&& parent of this node is last parent)
**mystr = "},"**
4.3.3.2.2.2: if (This node is the last child node &&
parent of this node is last parent &&
flag=1 )
**mystr =" },"**
4.3.3.2.2.3: if (This node is the last child node &&
parent of this node is last parent &&
flag=0 )
**mystr =" }]"**
I hope it helps you for more information follow here:
Dynamic-Treeview-with-Drag-and-Drop-by-Kendo
回答3:
hi: you should add data property in schema :
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees",
data: "employees"
}
}
