Jquery树插件zTree入门教程

1，下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的js和css

[html]  view plain copy print ?

1. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>  
2.     <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>  
3.     <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>  
4.     <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>  
5. <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">  
6.   
7. jquery.ztree.core-3.5.js：zTree核心包  
8.   
9. jquery.ztree.excheck-3.5.js：复选框功能包   
10.   
11. jquery.ztree.exedit-3.5.js：编辑功能包   

zTree核心包是必须引入的。

2，配置zTree，个别说明见代码中的注释

zTree设置信息：

变量：zTree中用到的html标签ID都会在后面添加以下后缀，如一级目录前面的展开和关闭图片的id为添加IDMark_Switch，其他的摸索吧。

[javascript]  view plain copy print ?

1. var IDMark_Switch = "_switch",  
2.         IDMark_Icon = "_ico",  
3.         IDMark_Span = "_span",  
4.         IDMark_Input = "_input",  
5.         IDMark_Check = "_check",  
6.         IDMark_Edit = "_edit",  
7.         IDMark_Remove = "_remove",  
8.         IDMark_Ul = "_ul",  
9.         IDMark_A = "_a";  

[javascript]  view plain copy print ?

1. var setting = {  
2.             view: {  
3.                 addHoverDom: addHoverDom,  
4.                 removeHoverDom: removeHoverDom  
5.             },  
6.             callback: {  
7.                 beforeClick: beforeClick,  
8.                 onClick: onClick  
9.             }  
10.         };  
11.         function beforeClick(treeId, treeNode, clickFlag) {  
12.             //alert(treeNode.id);  
13.             var ticketBagNo = treeNode.phone;  
14.             re =new RegExp(ticketBagNo);   
15.             var accept = $("#accept").val();//找到要放数据的地方，并测试是否已经存在  
16.             if(!re.test(accept)){  
17.             $("#accept").val(accept+treeNode.name+"<"+ticketBagNo+">,");  
18.             }  
19.         }  
20.         function onClick(event, treeId, treeNode, clickFlag) {  
21.             //alert(clickFlag+"zzz");  
22.         }  

callback中有两个回调函数

beforeClick：

是用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选默认值：null

onClick:
用于捕获节点被点击的事件回调函数
如果设置了 beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
默认值：null

addHoverDom，就是鼠标移过节点所作出的反应,我们这里为一级目录添加一个全选功能，addHoverDom是一个函数：

[javascript]  view plain copy print ?

1. function addHoverDom(treeId, treeNode) {  
2.                 if (!treeNode.children)return;  
3.             if (treeNode.parentNode && treeNode.parentNode.id!=1 ) return;  
4.             var aObj = $("#" + treeNode.tId + IDMark_A);  
5.             if (treeNode.children.length>0) {  
6.                 if ($("#diyBtn1_"+treeNode.id).length>0) return;  
7.                 if ($("#diyBtn2_"+treeNode.id).length>0) return;//' onclick='allSelect("+treeNode+")  
8.                 var editStr = "<a id='diyBtn1_" +treeNode.id+ "' style='margin:0 0 0 5px;color:red;'>全选</a>";  
9.                 aObj.append(editStr);  
10.                 document.getElementById("diyBtn1_"+treeNode.id).onclick = function() {  
11.                      allSelect(treeNode);  
12.                               };  
13.             }  
14.                   
15.         }  

全选allSelect方法：

[javascript]  view plain copy print ?

1. function allSelect(treeNode){  
2.             if (!treeNode.children)return;  
3.             for(i=0;i<treeNode.children.length;i++){  
4.                 var ticketBagNo = treeNode.children[i].phone;  
5.             re =new RegExp(ticketBagNo);    
6.             var accept = $("#accept").val();//找到文本框如果该记录未添加就添加  
7.             if(!re.test(accept)){  
8.                 $("#accept").val(accept+treeNode.children[i].name+"<"+ticketBagNo+">,");  
9.             }  
10.             }  
11.         }  

removeHoverDom：鼠标移除节点所做出的反应，去掉全选

[javascript]  view plain copy print ?

1. function removeHoverDom(treeId, treeNode) {  
2.         if (!treeNode.children)return;  
3.         $("#diyBtn1_"+treeNode.id).unbind().remove();  
4.         }  

zTree节点信息：可以根据需求动态生成。

以下为Demo数据，每个节点中的name，phone都可以按照自己的需要进行添加或修改，比如你要添加一个年龄：age="23",但是要注意格式问题，这一点是非常方便。

[javascript]  view plain copy print ?

1. var zNodes =[  
2.           
3.             {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开  
4.                 children:[  
5.                           
6.                         {id:2,name:"测试老师",phone:"123456789101"},  
7.                         {id:3,name:"大老师",phone:"15623545621"}  
8.                       
9.                 ]  
10.             },  
11.             {id:4,name:"一班",open:true,  
12.                 children:[  
13.                       
14.                          {id:5,name:"小花",phone:"25364215211"},  
15.                         {id:6,name:"小绿",phone:"365241253"}  
16.                         },  
17.   
18.                         {id:7,name:"二班",open:true,  
19.                 children:[  
20.                       
21.                          {id:8,name:"小家",phone:"25364215211"},  
22.                         {id:9,name:"小沙",phone:"365241253"}  
23.                                 }  
24.   
25.   
26.   
27.                       ];  

以下是我用jsp从服务动态生成树的例子,不需要可以忽略，我留着以后参考的。

[html]  view plain copy print ?

1. /*var zNodes =[  
2.         <s:if test="#session.teacherList.size()>0">  
3.             {id:1,name:"所有老师",open:false,  
4.                 children:[  
5.                         <s:iterator value="#session.teacherList" status="tindex" var="t">  
6.                         <s:if test="#session.teacherList.size() != #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"},</s:if>  
7.                         <s:if test="#session.teacherList.size() == #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"}</s:if>  
8.                         </s:iterator>  
9.                 ]  
10.             },  
11.             </s:if>  
12.         <s:iterator value="#session.classList" status="loop" var="c">  
13.             <s:if test="#c.students.size()>0">  
14.             {id:<s:property value='#c.students.size()+#session.teacherList.size()+#loop.index+3'/>,name:"<s:property value='#c.clsName' escape='false'/>",open:true,  
15.                 children:[  
16.                     <s:iterator value="#c.students" status="l" var="s">  
17.                           
18.                         <s:if test="#c.students.size() != #l.index+1"> {id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property  escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"},</s:if>  
19.                         <s:if test="#c.students.size() == #l.index+1">{id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property  escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"}</s:if>  
20.                           
21.                     </s:iterator>  
22.                     <s:if test="#session.classList.size() != #loop.index+1">]},</s:if>  
23.                     <s:if test="#session.classList.size() == #loop.index+1">]}</s:if>  
24.             </s:if>  
25.         </s:iterator>  
26.         ];*/  

准备就绪。初始化树要显示的地方，

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.             $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
3.         });