jQuery jstree是一款非常方便的樹形結構控件,可以快速構建一個展開/折疊式的樹狀圖,從而實現各種可拖拽、可選擇、可編輯以及復雜的樹形結構等功能。
下面是一個簡單的jQuery jstree實例的代碼:
<script src="jquery-1.11.0.min.js"></script> <script src="jstree.min.js"></script> <div id="tree"></div> <script type="text/javascript"> $(function () { $('#tree').jstree({ "core" : { "data" : [ { "text" : "Parent Node", "children" : [ { "text" : "Child Node 1" }, { "text" : "Child Node 2" } ] } ] } }); }); </script>
上述代碼會在指定的div元素下生成一個樹形結構,此處采用的是jstree的默認樣式,僅有兩個節點。這里的核心代碼就是通過jQuery選擇器選中對應的HTML元素,并對其進行jstree的初始化,同時根據設定的數據對其進行渲染。
此外還可以對其進行一些配置,比如設置樹結構的復選框類型,啟用狀態保存功能,自定義節點圖標,以及開啟拖拽、重命名、插入和刪除等編輯功能。
總之,jQuery jstree提供了非常靈活的構建樹形結構的方式,可以根據實際需要進行定制化和擴展。