實現效果：
代碼如下：
<html><head><title></title></head><script type="text/javascript" src="jquery-1.10.2.js"></script><script type="text/javascript" src="jquery.ztree.all-3.5.min.js"></script><link href="zTreeStyle.css" rel="stylesheet" type="text/css"/><script type="text/javascript">$(function(){var setting = {view: {dblClickExpand: false,showLine: true,selectedMulti: false},data: {simpleData: {enable:true,idKey: "id",pIdKey: "pId",rootPId: ""}},callback: {beforeClick: function(treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("tree");if (treeNode.isParent) {zTree.expandNode(treeNode);}},onClick:function(event,treeId,treeNode){if(treeNode.id > 300){alert('你點擊的節點名稱為-->'+treeNode.name);}else if(treeNode.id == 101 || treeNode.id == 102){window.location.href=treeNode.url;}},onCheck:function(event,treeId,treeNode){alert('你選擇的節點名稱為-->'+treeNode.name);}},check:{enable:true}};var zNodes =[{id:1, pId:0, name:"頂層節點1", open:true},{id:101, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_self'},{id:102, pId:1, name:"去Google",url:'http://www.google.com',target:'_top'},{id:103, pId:1, name:"連接線"},{id:104, pId:1, name:"不顯示"},{id:105, pId:1, name:"自訂表徵圖"},{id:2, pId:0, name:"頂層節點2", open:false},{id:201, pId:2, name:"Checkbox 勾選操作"},{id:206, pId:2, name:"Checkbox nocheck 示範"},{id:207, pId:2, name:"Checkbox chkDisabled 示範"},{id:208, pId:2, name:"Checkbox halfCheck 示範"},{id:202, pId:2, name:"Checkbox 勾選統計"},{id:203, pId:2, name:"用 zTree 方法 勾選 Checkbox"},{id:204, pId:2, name:"Radio 勾選操作"},{id:3, pId:0, name:"頂層節點3", open:false},{id:301, pId:3, name:"拖拽 節點 基本控制", file:"exedit/drag"},{id:302, pId:3, name:"拖拽 節點 進階控制", file:"exedit/drag_super"},{id:303, pId:3, name:"用 zTree 方法 移動 / 複製 節點", file:"exedit/drag_fun"},{id:304, pId:3, name:"基本 增 / 刪 / 改 節點", file:"exedit/edit"},{id:305, pId:3, name:"進階 增 / 刪 / 改 節點", file:"exedit/edit_super"},];var t = $("#tree");t = $.fn.zTree.init(t, setting, zNodes);$("#expandAll").bind('click',function(){t.expandAll(true);});$("#selected").bind('click',function(){var nodes = t.getCheckedNodes();alert(nodes.length);if(nodes.length == 0){alert("你還未選在任何節點");}else{var s = "";for(i = 0; i < nodes.length; i++){s+= nodes[i].name+" ";}alert("你選擇的節點有：\r\n\t"+s);}});});</script><body><ul id="tree" class="ztree"></ul><br/><input type="button" value="展開全部節點" id="expandAll"/> <input type="button" value="擷取選在的節點" id="selected"/></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
