树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。
Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰，EXTtree、E3tree功能不全。
ZTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。
示例如下：
-
添加相关CSS和js库
<head> <meta charset="utf-8" /> //添加相关的ztree的css <link rel="stylesheet" href="../plugins/jQueryZtree/demo.css" /> <link rel="stylesheet" href="../plugins/jQueryZtree/zTreeStyle.css" /> //添加相关的jquery和ztree的js库 <script src="../plugins/jQueryZtree/jquery-1.4.4.min.js"></script> <script src="../plugins/jQueryZtree/jquery.ztree.core-3.5.js"></script> <script src="../plugins/jQueryZtree/jquery.ztree.excheck-3.5.min.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { check: { enable: true }, data: { simpleData: { enable: true } }, callback: { onCheck: onCheck } }; function filter(node) { //过滤器直选中2级节点累加 return (node.checked == true); } function onCheck(e, treeId, treeNode) { var pNode = treeNode; var pNodePath = ""; while(!!pNode){ pNodePath = "\\"+ pNode.name + pNodePath; pNode = pNode.getParentNode(); } alert(pNodePath); /* var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo").getNodesByFilter(filter); for(var i = 0,len = zTreeObj.length; i < len; i++){ alert(zTreeObj[i].name); } */ } var zNodes =[ { name:"父节点1 - 展开", open:true, children: [ { name:"父节点11 - 折叠", children: [ { name:"叶子节点111"}, { name:"叶子节点112"}, { name:"叶子节点113"}, { name:"叶子节点114"} ]}, { name:"父节点12 - 折叠", children: [ { name:"叶子节点121"}, { name:"叶子节点122"}, { name:"叶子节点123"}, { name:"叶子节点124"} ]}, { name:"父节点13 - 没有子节点", isParent:true} ]}, { name:"父节点2 - 折叠", children: [ { name:"父节点21 - 展开", open:true, children: [ { name:"叶子节点211"}, { name:"叶子节点212"}, { name:"叶子节点213"}, { name:"叶子节点214"} ]}, { name:"父节点22 - 折叠", children: [ { name:"叶子节点221"}, { name:"叶子节点222"}, { name:"叶子节点223"}, { name:"叶子节点224"} ]}, { name:"父节点23 - 折叠", children: [ { name:"叶子节点231"}, { name:"叶子节点232"}, { name:"叶子节点233"}, { name:"叶子节点234"} ]} ]}, { name:"父节点3 - 没有子节点", isParent:true} ]; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); var zTree = $.fn.zTree.getZTreeObj("treeDemo") //配置ztree同时选中父节点和子节点 zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }; }); //--> </SCRIPT> </head> <body> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </body> -
注意在head中的JavaScript标签，标签里面要加上<!--//-->，否则部分JavaScript可能无法执行，比如普通for循环就不能执行
<SCRIPT type="text/javascript"> <!-- for(var i = 0; i < 3; i++){ alert(i); } //--> </SCRIPT>