现在的位置: 首页 > 综合 > 正文

jQuery Ztree

2013年08月20日 ⁄ 综合 ⁄ 共 3057字 ⁄ 字号 小 中 大 ⁄ 评论关闭

Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式。

当前版本Ztree 3.5.01

simple.html

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>simple.html</title>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.       
  10.     <link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">  
  11.     <script type="text/javascript" src="js/jquery.js"></script>  
  12.     <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>  
  13.     <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>  
  14. <!--     <script type="text/javascript" src="js/standard.js"></script> -->  
  15.     <script type="text/javascript" src="js/1.js"></script>  
  16.   </head>  
  17.     
  18.   <body>  
  19.     <div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div>  
  20.   </body>  
  21. </html>  


js

[javascript] view
plaincopy

  1. var setting = {    
  2.             data: {    
  3.                 simpleData: {    
  4.                     enable: true  
  5. //                  idKey:"id",  
  6. //                  pIdKey:"pId",  
  7.                 }    
  8.             }    
  9.             ,async: {    
  10.                 enable: true,    
  11.                 url:"/Java_Solr/servlet/ZTreeSerlvet",    
  12.                 autoParam:["id", "name"],    
  13.                 otherParam:{"otherParam":"zTreeAsyncTest"},    
  14. //              dataType: "text",//默认text  
  15. //              type:"get",//默认post  
  16.                 dataFilter: filter  //异步返回后经过Filter  
  17.             }  
  18.             ,callback:{  
  19. //              beforeAsync: zTreeBeforeAsync,      // 异步加载事件之前得到相应信息    
  20.                 asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun    
  21.                 asyncError: zTreeOnAsyncError,   //加载错误的fun    
  22.                 beforeClick:beforeClick //捕获单击节点之前的事件回调函数  
  23.             }  
  24.         };    
  25.         //treeId是treeDemo  
  26.         function filter(treeId, parentNode, childNodes) {    
  27.             if (!childNodes) return null;    
  28.             for (var i=0, l=childNodes.length; i<l; i++) {    
  29.                 childNodes[i].name = childNodes[i].name.replace('','');    
  30.             }    
  31.             return childNodes;    
  32.         }    
  33.           
  34.         function beforeClick(treeId,treeNode){  
  35.             if(!treeNode.isParent){  
  36.                 alert("请选择父节点");  
  37.                 return false;  
  38.             }else{  
  39.                 return true;  
  40.             }  
  41.         }  
  42.           
  43.         function zTreeOnAsyncError(event, treeId, treeNode){    
  44.             alert("异步加载失败!");    
  45.         }    
  46.           
  47.         function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){    
  48.               
  49.         }  
  50.           
  51.         /***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/  
  52.         var zNodes=[];  
  53. /*        var zNodes =[   
  54.             { id:1, pId:0, name:"parentNode 1", open:true},   
  55.             { id:11, pId:1, name:"parentNode 11"},   
  56.             { id:111, pId:11, name:"leafNode 111"},   
  57.             { id:112, pId:11, name:"leafNode 112"},   
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞