×
400 028 6601

jquerytreeView工具简单树形目录工具

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

成都创新互联公司作为成都网站建设公司，专注网站建设公司、网站设计，有关成都定制网页设计方案、改版、费用等问题，行业涉及水泥搅拌车等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

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

 

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


 

jquery treeView工具 简单树形目录工具

treeView.html

  1.  
  2.  
  3.   
  4.    ZTREE DEMO  
  5.    
  6.    
  7.    
  8.    
  9.    
  10.    
  11.   var setting = {  
  12.     showLine: true, //是否带有虚线  
  13.     checkable: true //是否带有选择框  
  14.  
  15. };  
  16. //数据内容  
  17. var zTreeNodes = [  
  18.     {"id":1, "pId":0, "name":"test1"},  
  19.     {"id":11, "pId":1, "name":"test11"},  
  20.     {"id":12, "pId":1, "name":"test12"},  
  21.     {"id":111, "pId":11, "name":"test111"}  
  22.  
  23. ];  
  24. $(document).ready(function(){  
  25.         setting.isSimpleData = true;    //是否为简单数组数据 这里还可以用json数据  
  26.         setting.treeNodeKey = "id";       
  27.         setting.treeNodeParentKey = "pId";  //以那个下标标识父节点  
  28. var zTree = $("#tree").zTree(setting, zTreeNodes);  
  29. });  
  30.    
  31.   
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  

 

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

 

 php异步传输数据:

jquery treeView工具 简单树形目录工具 

 zTree.hmtl

  1.  
  2.  
  3.  
  4.  ZTREE DEMO  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11. var setting = {  
  12. showLine: true,  
  13. async: true, //异步加载  
  14. asyncUrl: "asyncData/node.php", //获取节点数据的URL地址  
  15. asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name  
  16. asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式)  
  17. asyncDataFilter : dataFilter, //异步加载数据函数名  
  18.  
  19. };  
  20. var zNodes =[]; //先定义接收数据的数组  
  21.  
  22. $(document).ready(function(){  
  23. var zTree = $("#tree").zTree(setting, zNodes);  
  24. });  
  25.  
  26. function dataFilter(treeId, parentNode, childNodes) {  
  27. if (childNodes) {  
  28. for(var i =0; i
  29. childNodes[i].name += "_filter";  
  30. }  
  31. }  
  32. return childNodes;  
  33. }  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  

node.php

  1.   
  2. [
  3. $pId = "1";  
  4. $pName = "hello world";  
  5. if(array_key_exists( 'id',$_REQUEST)) {  
  6. $pId=$_REQUEST['id'];  
  7. }  
  8. if(array_key_exists('name',$_REQUEST)) {  
  9. $pName=$_REQUEST['name'];  
  10. }  
  11. if ($pId==null || $pId=="") $pId = "0";  
  12. if ($pName==null) $pName = "";  
  13.  
  14. for ($i=1; $i<5; $i++) {  
  15. $nId = $pId.$i;  
  16. $nName = "tree".$nId;  
  17. echo "{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  
  18. if ($i<4) {  
  19. echo ",";  
  20. }  
  21.  
  22. }  
  23. ?>] 

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


当前标题：jquerytreeView工具简单树形目录工具
路径分享：http://mbwzsj.com/article/goeegd.html

其他资讯