Kendo UI Treeview 和 JSON
Posted
技术标签:
【中文标题】Kendo UI Treeview 和 JSON【英文标题】：Kendo UI Treeview and JSON 【发布时间】：2012-10-28 12:31:05 【问题描述】：所以我想创建一个带有 kendo UI 树视图项的树，并将其绑定到作为 JSON 文件的远程分层数据源。
我希望生成的树类似于：
（车辆）
--（汽车）
----FM-1100
----FM-4200
--（自行车）
----FM-3100
（人员）
--（客户）
----GH-3000
--(VIP)
----GH-3100
PS。 () 中的名称应该类似于包含其“孩子”的文件夹
我已经在 kendo ui 网站上查看了有关上述所有内容的文档，但我对每次在树中展开项目时树视图用来加载更深阶段的整个回调函数有点困惑..
我们以剑道文档中的例子为例：
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 有关？这里有点迷失..
提前致谢
【问题讨论】：
【参考方案1】：您能否创建具有以下结构的 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 文件的 URL。
【讨论】：
你是救生员！ :D 非常感谢！ 这里有个小问题是为了避免在没有理由的情况下创建一个新问题，剑道是否有一种方法可以将更改存储在树视图上（比如说拖放）直接回到 json 文件还是用页面当前的树结构创建一个新的 json 文件？还是我必须自己跟踪拖动事件并从头开始编程所有这些？ 实际上你应该创建一个新问题，因为它更容易让其他人找到它。标题可能正在从 KendoUI TreeView 获取当前数据。答案是当前数据在 $("#treeview").data("kendoTreeView").dataSource.data(). 我提出了新问题以及我遇到的问题，如果您有时间请查看***.com/questions/13309896/… 再次感谢 如何在服务器端生成这种 json 用于 asp.net csharp 中的目录遍历...【参考方案2】：实际上下面的逻辑描述将生成自引用表为JSON格式，然后将其内容传递给treeview数据源。 我已经为下面的数据模型生成了这个方法，它说明了组织中可能有经理或雇主的个人，如果你的数据库不同，你应该查看代码并对其进行一些更改。
namespace Treeview.Models
public class Personal
public int ID get; set;
public int Parent_ID get; set; //reportsto field
public string Name get; set;
要将分层数据源生成为 JSON 文件，请按照以下步骤操作，完整说明请点击链接： 第 1 步：创建一个称为 Treeview 的 嵌套 方法
public string Treeview(int itemID, string mystr, int j, int flag)它的输出是json作为字符串并得到
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
第 2 步：首先，您从 mvc 中的操作或应用程序调用的其他部分调用此方法，例如 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
第 3 步：检查当前节点是否有父节点？ 3.1：主节点根：如果您刚刚进入此方法，那么假设您必须 从数据库中选择 没有父节点且其父 ID 等于 NULL 的节点 在这里生成像 mystr = "[" 这样的 json 字符串 3.2 嵌套节点：如果多次调用此方法，请检查所有节点 他们的父母等于 itemid 在这里生成像 mystr = ",item:["
这样的 json 字符串第 4 步：现在您有一个您从第三步尝试过的数据列表 4.1：做一个foreach循环，调用每个节点，写成这样 4.2：
foreach (item in querylist)
mystr = id: “” , text: “”
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 =" ]"**
希望对您有所帮助，请关注here：
Dynamic-Treeview-with-Drag-and-Drop-by-Kendo
【讨论】：
检查以下内容以改进您的格式：***.com/editing-help【参考方案3】：嗨：您应该在架构中添加数据属性：
schema:
model:
id: "EmployeeId",
hasChildren: "HasEmployees",
data: "employees"
【讨论】：
以上是关于Kendo UI Treeview 和 JSON的主要内容，如果未能解决你的问题，请参考以下文章
即使没有孩子，Kendo UI Treeview 也会显示曲折
ASP MVC TreeView的Kendo UI：代表Tree显示Json响应