EasyUI Tree是一款基于jQuery的樹形控件,可以通過使用Ajax來加載JSON數據來構建樹形結構。下面是一個示例代碼:
<div id="tree"></div> <script> $('#tree').tree({ url: '/api/getTreeData', method: 'get', animate: true, lines: true }); </script>
在上面的代碼中,我們將EasyUI Tree控件應用到一個id為"tree"的div元素上,并使用url屬性來指定獲取樹形數據的API接口。這個API接口應該返回一個JSON格式的數據,例如:
[ { "id": 1, "text": "Node 1", "state": "closed", "children": [ { "id": 2, "text": "Node 2" }, { "id": 3, "text": "Node 3" } ] }, { "id": 4, "text": "Node 4", "state": "closed", "children": [ { "id": 5, "text": "Node 5" }, { "id": 6, "text": "Node 6" } ] } ]
在上面的JSON數據中,我們定義了兩個頂級節點,每個節點下面有兩個子節點。節點的text屬性表示節點名稱,id屬性表示節點ID,state屬性表示節點狀態(closed表示有子節點,但未展開;open表示沒有子節點或已展開),children屬性表示子節點列表。
這樣,我們就可以使用EasyUI Tree和Ajax來構建樹形結構了。這個控件非常適用于需要展示樹狀數據的項目,同時也非常易用和靈活。