JQuery樹形表格是一種常見的網頁顯示數據的方式,它能夠顯示大量數據并具有樹形結構,方便用戶查看和操作。下面我們來介紹一下如何使用JQuery樹形表格。
// 引入JQuery庫 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> // 定義一個數據數組 var data = [ { "id": 1, "name": "節點1", "children": [ { "id": 2, "name": "節點1.1", "children": [ { "id": 3, "name": "節點1.1.1" }, { "id": 4, "name": "節點1.1.2" } ] }, { "id": 5, "name": "節點1.2" } ] }, { "id": 6, "name": "節點2", "children": [ { "id": 7, "name": "節點2.1" } ] } ]; // 定義一個函數用于遞歸創建表格行 function createRow(data, level) { var html = "<tr><td style='padding-left:" + 20*level + "px'>" + data.name + "</td></tr>"; $("table").append(html); if (data.children) { for (var i=0; i<data.children.length; i++) { createRow(data.children[i], level+1); } } } // 創建表格 for (var i=0; i<data.length; i++) { createRow(data[i], 0); }
通過以上代碼,我們可以創建一個包含數據的樹形表格。其中,我們首先需要引入JQuery庫。然后,我們定義了一個數據數組,該數據數組包含了我們要展示的數據。接著,我們定義了一個用于遞歸創建表格行的函數,在該函數中通過判斷數據是否有子節點來進行遞歸操作,最后將創建好的表格行添加到表格中。
在實際應用中,我們可以通過JQuery樹形表格來展示產品分類、部門層級等數據。通過這種方式來展示數據,用戶可以更加清晰地了解數據之間的上下級關系,方便進行操作。