EasyUI Tree是前端開發(fā)中常用的一種樹形結構展示插件。其通常的數據格式是一個簡單的JSON對象,但是在實際開發(fā)中,所需展示的樹形結構往往比較復雜,需要使用組合JSON來實現。
var data = [{ "id": "1", "text": "Node 1", "children": [{ "id": "11", "text": "Node 11" },{ "id": "12", "text": "Node 12", "children": [{ "id": "121", "text": "Node 121" },{ "id": "122", "text": "Node 122" }] }] },{ "id": "2", "text": "Node 2", "children": [{ "id": "21", "text": "Node 21" },{ "id": "22", "text": "Node 22" }] }];
在上面的代碼中,我們定義了一個包含兩個頂層節(jié)點的數組,每個節(jié)點都有一個id和text屬性,可以根據需求進行添加其他屬性。同時,每個節(jié)點都有一個children屬性,用于定義子節(jié)點。根據這種結構,可以實現任意復雜的樹形結構展示。
使用EasyUI Tree時,可以通過以下方式將組合JSON導入到Tree中:
$("#tree").tree({ data: data });
這樣,我們就可以輕松地實現帶有多層級的樹形結構展示了。