zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.

这是zTree的官方网站喜欢的朋友可以多加关注http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.


treeView.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD><TITLE>ZTREEDEMO</TITLE><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">varsetting={ showLine:true,//是否带有虚线 checkable:true//是否带有选择框 }; //数据内容 varzTreeNodes=[ {"id":1,"pId":0,"name":"test1"}, {"id":11,"pId":1,"name":"test11"}, {"id":12,"pId":1,"name":"test12"}, {"id":111,"pId":11,"name":"test111"} ]; $(document).ready(function(){ setting.isSimpleData=true;//是否为简单数组数据这里还可以用json数据 setting.treeNodeKey="id"; setting.treeNodeParentKey="pId";//以那个下标标识父节点 varzTree=$("#tree").zTree(setting,zTreeNodes); }); </SCRIPT></HEAD><BODY><ulid="tree"class="tree"style="width:300px;overflow:auto;"></ul></BODY></HTML>

把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据

php异步传输数据:

zTree.hmtl

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD><TITLE>ZTREEDEMO</TITLE><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">varsetting={ showLine:true, async:true,//异步加载 asyncUrl:"asyncData/node.php",//获取节点数据的URL地址 asyncParam:["name","id"],//获取节点数据时，必须的数据名称，例如：id、name asyncParamOther:["test","true"],//其它参数(key,value键值对格式) asyncDataFilter:dataFilter,//异步加载数据函数名 }; varzNodes=[];//先定义接收数据的数组 $(document).ready(function(){ varzTree=$("#tree").zTree(setting,zNodes); }); functiondataFilter(treeId,parentNode,childNodes){ if(childNodes){ for(vari=0;i<childNodes.length;i++){ childNodes[i].name+="_filter"; } } returnchildNodes; } </SCRIPT></HEAD><BODY><ulid="tree"class="tree"style="width:300px;overflow:auto;"></ul></BODY></HTML>

node.php

<?php?> [<?php $pId="1"; $pName="helloworld"; if(array_key_exists('id',$_REQUEST)){ $pId=$_REQUEST['id']; } if(array_key_exists('name',$_REQUEST)){ $pName=$_REQUEST['name']; } if($pId==null||$pId=="")$pId="0"; if($pName==null)$pName=""; for($i=1;$i<5;$i++){ $nId=$pId.$i; $nName="tree".$nId; echo"{id:'".$nId."',name:'".$nName."',isParent:".(($i%2)!=0?"true":"false")."}"; if($i<4){ echo","; } } ?>]

这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧