转自：http://www.evget.com/article/2013/8/27/19479.html
概述：本文教你用JSON轻松实现Kendo UI treeview 序列化的方法，将大大提升你的开发效率。
Treeview是界面设计中经常要用到的控件，那你是否想过将界面开发工具 Kendo UI 中的treeview序列化呢？将它存储之后就可以随时加载调用，可以大大提升你的开发效率。本文将为你展示如何用一段jQuery代码轻松将 treeview 序列化。
注：Kendo UI是 Telerik 推出的基于jQuery HTML5的UI开发框架，提供数据可视化和服务器封装解决方案，开发面向桌面、移动设备的应用程序，以其优良的性能深受国内外开发人员喜爱。>>免费下载
下面这个例子将一列复选框以treeview控件展示层级数据。用户通过点击复选框选择数据项，并将选项保存为优先设置的一部分。这些选项被保存之后，我们仍然需要从数据中进行加载。
Treeview 的div部分：
|
1
2
3
|
<body> <div
id="treeview"></div></body> |
jQuery代码也相当简单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var
ds = new kendo.data.HierarchicalDataSource({ data:
[{"text":"Item 1","id":"1","expanded":true, "checked":true,"items":[{"text":"Item
1.1", "id":"2","checked":true},{"text":"Item
1.2", "id":"3","checked":true},{"text":"Item
1.3", "id":"4","checked":true}]},{"text":"Item
2", "id":"5","expanded":true,"items":[{"text":"Item
2.1", "id":"6","checked":true},{"text":"Item
2.2", "id":"7"},{"text":"Item
2.3","id":"8",}]}, {"text":"Item
3","id":"9"}]});var
tv = $("#treeview").kendoTreeView({ checkboxes:
{ checkChildren:
true }, dataSource:
ds}).data("kendoTreeView");function
treeToJson(nodes) { return
$.map(nodes, function(n, i) { var
result = { text: n.text, id: n.id, expanded: n.expanded, checked: n.checked }; if
(n.hasChildren) result.items
= treeToJson(n.children.view()); return
result; });}var
json = treeToJson(tv.dataSource.view());console.log(JSON.stringify(json)); |
需要说明的一点是，函数 treetoJson()将遍历所有树节点并以JSON的形式返回数据数组。你可以在JS Bin中测试以上代码，但是要确保通过"Add Library"将"Kendo UI"加进去。