使用jQuery開發tree插件
阿新 • • 發佈：2018-06-07
AC 顯示 console 樹狀 blue 演示 parameter 綁定 如果
1、插件截圖
2、插件使用
首先引入jquery庫，然後引入tree.js、tree.css文件，如下：
1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> 2 3 <script type="text/javascript" src="js/tree.js"></script> 4 <link rel="stylesheet" href="css/blue/tree.css"/>
3、DOM樹
這種方式以HTML代碼為基礎，不能像JSON或AJAX_JSON方式那樣動態加載數據，而且對函數的支持也不是很好，只適合做簡單的樹狀菜單顯示，如果是復雜的需求不建議使用這種方式
HTML代碼
1 <div id="tree-demo1" style="margin-bottom: 10px;"> 2 <div id="tree1"> 3 <ul> 4 <li><a href="#">菜單</a></li> 5 <li open><a href="#">用戶管理</a> 6 <ul> 7 <li><a href="#">用戶查看</a></li> 8 <li><a href="#">用戶添加</a></li> 9 <li open><a href="#">權限管理</a> 10 <ul> 11 <li><a href="#">權限查看</a></li> 12 <li><a href="#">權限添加</a></li> 13 <li><a href="#">分配權限</a></li> 14 </ul> 15 </li> 16 </ul> 17 </li> 18 <li><a href="#">系統管理</a> 19 <ul> 20 <li><a href="#">管理員管理</a> 21 <ul> 22 <li><a href="#">管理員查看</a></li> 23 <li><a href="#">管理員添加</a></li> 24 </ul> 25 </li> 26 <li><a href="#">黑名單管理</a></li> 27 <li><a href="#">日誌管理</a></li> 28 </ul> 29 </li> 30 </ul> 31 </div> 32 </div>
JS腳本
1 // 初始化面板 2 $("#tree-demo1").panel({ 3 title: "DOM樹插件", 4 width: "600", 5 height: "45%" 6 }); 7 // 初始化樹插件 8 $("#tree1").tree();
4、JSON樹
這種方式需要在初始化插件時傳入一個JSON格式的data參數，插件會解析data數據，生成DOM結構，並且可以為節點綁定點擊函數，另外對於函數的支持也比DOM方式好很多
HTML代碼
1 <div id="tree-demo2" style="margin-bottom: 10px;"> 2 <div id="tree2"></div> 3 </div>
JS腳本
以下代碼使用data作為數據，為節點綁定點擊函數
1 // 初始化面板 2 $("#tree-demo2").panel({ 3 title: "JSON樹插件", 4 width: "600", 5 height: "45%" 6 }); 7 // 初始化樹插件 8 $("#tree2").tree({ 9 onClick: function(node) { 10 console.log(node); 11 alert(node.text); 12 }, 13 data: [ 14 { 15 "id": 1, 16 "text": "菜單" 17 }, 18 { 19 "children": [ 20 { 21 "id": 3, 22 "text": "用戶查看" 23 }, 24 { 25 "id": 4, 26 "text": "用戶添加" 27 }, 28 { 29 "children": [ 30 { 31 "id": 6, 32 "text": "權限查看" 33 }, 34 { 35 "id": 7, 36 "text": "權限添加" 37 }, 38 { 39 "id": 8, 40 "text": "分配權限" 41 } 42 ], 43 "id": 5, 44 "open": false, 45 "parentId": 2, 46 "text": "權限管理", 47 "type": "folder", 48 "url": "" 49 } 50 ], 51 "id": 2, 52 "open": false, 53 "parentId": 0, 54 "text": "用戶管理", 55 "type": "folder", 56 "url": "" 57 }, 58 { 59 "children": [ 60 { 61 "children": [ 62 { 63 "id": 11, 64 "text": "管理員查看" 65 }, 66 { 67 "id": 12, 68 "text": "管理員添加" 69 } 70 ], 71 "id": 10, 72 "open": false, 73 "parentId": 9, 74 "text": "管理員管理", 75 "type": "folder", 76 "url": "" 77 }, 78 { 79 "id": 13, 80 "text": "黑名單管理" 81 }, 82 { 83 "id": 14, 84 "text": "日誌管理" 85 } 86 ], 87 "id": 9, 88 "parentId": 0, 89 "text": "系統管理", 90 "type": "folder" 91 } 92 ] 93 });
5、AJAX_JSON樹
這種方式需要在初始化插件時傳入一個url參數，插件會訪問這個url獲取json數據（和JSON樹方式中的data參數一樣的格式），然後生成DOM結構，為節點綁定點擊函數，而且在點擊父級菜單時會訪問url（把這個菜單的id作為參數）獲取下級菜單後再展開
HTML代碼
1 <div id="tree-demo3"><!-- float: left; margin-left: 10px; --> 2 <div id="tree3"></div> 3 </div>
JS腳本
1 // 初始化面板 2 $("#tree-demo3").panel({ 3 title: "AJAX_JSON樹插件", 4 width: "600", 5 height: "45%" 6 }); 7 // 初始化樹插件 8 $("#tree3").tree({ 9 url: "ajax/ajax_tree.jsp", 10 onClick: function(node) { 11 console.log(node); 12 alert(node.text); 13 } 14 });
後臺腳本，需要使用json庫支持
1 <% 2 List<TreeNode> nodes = new ArrayList<TreeNode>(); 3 4 nodes.add(new TreeNode(1, "菜單", "", "", false, 0)); 5 nodes.add(new TreeNode(2, "用戶管理", "", "folder", false, 0)); 6 nodes.add(new TreeNode(3, "用戶查看", "", "", false, 2)); 7 nodes.add(new TreeNode(4, "用戶添加", "", "", false, 2)); 8 nodes.add(new TreeNode(5, "權限管理", "", "folder", false, 2)); 9 nodes.add(new TreeNode(6, "權限查看", "", "", false, 5)); 10 nodes.add(new TreeNode(7, "權限添加", "", "", false, 5)); 11 nodes.add(new TreeNode(8, "分配權限", "", "", false, 5)); 12 nodes.add(new TreeNode(9, "系統管理", "", "folder", true, 0)); 13 nodes.add(new TreeNode(10, "管理員管理", "", "folder", true, 9)); 14 nodes.add(new TreeNode(11, "管理員查看", "", "", false, 10)); 15 nodes.add(new TreeNode(12, "管理員添加", "", "", false, 10)); 16 nodes.add(new TreeNode(13, "黑名單管理", "", "", false, 9)); 17 nodes.add(new TreeNode(14, "日誌管理", "", "", false, 9)); 18 19 String reqId = request.getParameter("id"); 20 int id = reqId == null || reqId.length() == 0 ? 0 : Integer.parseInt(reqId); 21 22 List<TreeNode> nodes2 = new ArrayList<TreeNode>(); 23 for(TreeNode n : nodes) { 24 if(n.getParentId() == id) { 25 nodes2.add(n); 26 } 27 } 28 29 JSONArray jsonObject = JSONArray.fromObject(nodes2); 30 out.print(jsonObject.toString()); 31 %>
6、tree插件初始化選項
| 選項 | 類型 | 作用 |
|---|---|---|
| data | Object | JSON格式數據，形如： [ { id: 1, text: "", open: true|false, type: "folder", children: [ { id: 3, text: "", url: "" } ], url: "" }, { id: 2, text: "", url: "" } ] |
| url | string | 獲取節點數據的遠程地址 |
| onClick | function | 節點點擊函數，插件會把被點擊的節點對象傳給這個函數 |
7、tree插件函數
| 函數名 | 參數 | 功能 | 返回值 | 示例 |
|---|---|---|---|---|
| open | folderNodeId | 打開指定節點，前提是該節點已經存在且是一個folder |
$("#btn1").click(function() {
$("#tree3").tree("open", 9);
});
|
|
| close | folderNodeId | 關閉指定節點，前提是該節點已經存在且是一個folder |
$("#btn3").click(function() {
$("#tree3").tree("close", 9);
});
|
|
| openAll | 打開全部folder節點 |
$("#btn5").click(function() {
$("#tree3").tree("openAll");
});
|
||
| closeAll | 關閉全部folder節點 |
$("#btn7").click(function() {
$("#tree3").tree("closeAll");
});
|
||
| reload | folderNodeId | 重新加載指定folder節點 |
$("#btn9").click(function() {
$("#tree3").tree("reload", 9);
});
|
8、演示和代碼
tree.js http://5ijy01.duapp.com/jq-ui/js/tree.js
tree.css http://5ijy01.duapp.com/jq-ui/css/blue/tree.css
Github https://github.com/xuguofeng/jq-ui
演示項目 http://5ijy01.duapp.com/jq-ui/index.html?tab=tree_demo
使用jQuery開發tree插件