easyui-tree是一款基于jQuery的樹形控件,可以快速的創建一個漂亮的樹形結構。它支持不同的樣式,并且可以通過JSON數據源來渲染樹形結構。其中,可以通過JSON數據源來為easyui-tree添加不同的樣式。
//JSON數據樣式 var data = [ { "id":1, "text": "Parent 1", "iconCls": "icon icon-folder", "children":[{ "id":2, "text":"Child 1", "checked":true, "iconCls": "icon icon-file" },{ "id":3, "text":"Child 2", "state":"closed", "iconCls": "icon icon-file" }] }, { "id":4, "text":"Parent 2", "iconCls":"icon icon-folder", "children":[{ "id":5, "text":"Child 3", "iconCls":"icon icon-file" }] } ];
以上JSON數據定義了兩個父節點,分別有兩個子節點和一個子節點。其中,可以為每個節點設置不同的圖標、狀態、狀態圖標以及選中狀態。
同時,可以通過以下代碼來渲染easyui-tree:
//渲染easyui-tree $('#tree').tree({ data: data, onClick: function(node){ alert(node.text); } });
以上代碼將數據源綁定到名為“tree”的div并渲染出來。而且,還可以通過onClick事件實現對樹形結構的點擊響應。