教你用JSON輕鬆實現Kendo UI Treeview序列化
阿新 • • 發佈：2019-01-26
Treeview是介面設計中經常要用到的控制元件，那你是否想過將介面開發工具 中的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"加進去。