jQuery Treeview 是一個強大的 JavaScript 插件,可以用來實現漂亮的樹形結構列表。它可以根據 JSON 數據自動生成樹形結構列表,并支持多級子節點、選中狀態、異步加載等特性。
為了使用 jQuery Treeview,我們首先需要引入以下兩個文件:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.treeview/1.4.4/jquery.treeview.min.js"></script>
然后,我們需要一個 HTML 元素作為容器來顯示樹形結構列表:
<div id="treeview"></div>
接著,我們需要編寫 JavaScript 代碼來通過 AJAX 請求獲取 JSON 數據,并使用 jQuery Treeview 來顯示它。下面是一個簡單的示例:
$(function() { $.ajax({ url: 'data.json', dataType: 'json', success: function(data) { $('#treeview').treeview({data: data}); } }); });
這段代碼會使用 jQuery 的 AJAX 功能來請求名為 data.json 的 JSON 數據文件,并在成功后調用 jQuery Treeview 的 treeview 方法來顯示它。
JSON 數據文件的格式應該像這樣:
[ { "text": "Parent 1", "nodes": [ { "text": "Child 1", "nodes": [ { "text": "Grandchild 1" }, { "text": "Grandchild 2" } ] }, { "text": "Child 2" } ] }, { "text": "Parent 2" } ]
其中,每個節點都必須包含一個 text 屬性用于顯示文本,如果有子節點則還需要包含一個 nodes 屬性,其值為一個數組,包含子節點的 JSON 對象。
除了基礎功能,jQuery Treeview 還有很多強大的功能,比如自定義樣式、選擇事件、展開/折疊事件等等。如果你想了解更多詳情,請參考官方文檔。
下一篇vue新建手機項目