Getting started with Jquery tree plug-in zTree

Getting started with Jquery tree plug-in zTree

This article mainly introduces the Jquery tree plug-in zTree usage getting started tutorial. The example analyzes the use skills of the zTree plug-in, which is very useful. For more information, see

 

 

This document analyzes the zTree usage of the Jquery tree plug-in. Share it with you for your reference. The specific analysis is as follows:

Search for the introduction of zTree.

The final result of this example is as follows:

When you move the cursor to the first-level directory, a full link is displayed. clicking the full link all the sub-items under the directory are added to the recipient's text box. Of course, clicking a single sub-item adds one. You can decide what information you want to add.

1. Download zTee, introduce jquery. js on the page, and add zTree js and css as required.

The Code is as follows:

<Script type = "text/javascript" src = "js/jquery-1.4.4.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ztree. core-3.5.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ztree. excheck-3.5.js"> </script>
<Script type = "text/javascript" src = "js/jquery.ztree.exe dit-3.5.js"> </script>
<Link rel = "stylesheet" href = "css/zTreeStyle/zTreeStyle.css" type = "text/css">

Jquery. ztree. core-3.5.js: zTree core package

Jquery. ztree. excheck-3.5.js: check box Feature Pack

Jquery.ztree.exe dit-3.5.js: Edit Feature Pack

 

ZTree core packages must be introduced.

2. Configure zTree. For more information, see the comments in the code.

ZTree settings:

Variable: the html Tag ID used in zTree will be followed by the following suffixes. For example, expand or close the image id in front of the first-level directory to add IDMark_Switch. find other methods.

The Code is as follows:

Var IDMark_Switch = "_ switch ",
IDMark_Icon = "_ ico ",
IDMark_Span = "_ span ",
IDMark_Input = "_ input ",
IDMark_Check = "_ check ",
IDMark_Edit = "_ edit ",
IDMark_Remove = "_ remove ",
IDMark_Ul = "_ ul ",
IDMark_A = "_ ";

 

Var setting = {
View :{
AddHoverDom: addHoverDom,
RemoveHoverDom: removeHoverDom
},
Callback :{
BeforeClick: beforeClick,
OnClick: onClick
}
};
Function beforeClick (treeId, treeNode, clickFlag ){
// Alert (treeNode. id );
Var ticketBagNo = treeNode. phone;
Re = new RegExp (ticketBagNo );
Var accept = $ ("# accept"). val (); // locate the location where you want to store the data and test whether the data already exists.
If (! Re. test (accept )){
$ ("# Accept"). val (accept + treeNode. name + "<" + ticketBagNo + "> ,");
}
}
Function onClick (event, treeId, treeNode, clickFlag ){
// Alert (clickFlag + "zzz ");
}

 

Two callback functions are available in callback.

BeforeClick:

Is used to capture or uncheck the previous Event Callback Function, and determines whether to allow or uncheck the default value: null Based on the returned value

OnClick:

Event Callback Function used to capture node clicks
If the beforeClick method is set and false is returned, The onClick Event Callback Function cannot be triggered.
Default Value: null

AddHoverDom is the reaction made by moving the mouse over the node. Here we add a full selection function for the first-level directory. addHoverDom is a function:

The Code is as follows:

Function addHoverDom (treeId, treeNode ){
If (! TreeNode. children) return;
If (treeNode. parentNode & treeNode. parentNode. id! = 1) return;
Var aObj = $ ("#" + treeNode. tId + IDMark_A );
If (treeNode. children. length> 0 ){
If ($ ("# diyBtn1 _" + treeNode. id). length> 0) return;
If ($ ("# diyBtn2 _" + treeNode. id). length> 0) return; // 'onclick = 'allselect ("+ treeNode + ")
Var editStr = "<a id = 'diybtn1 _" + treeNode. id + "'style = 'margin: 0 0 0 5px; color: red; '> select all </a> ";
AObj. append (editStr );
Document. getElementById ("diyBtn1 _" + treeNode. id). onclick = function (){
AllSelect (treeNode );
};
}
}

 

Select All allSelect methods:

The Code is as follows:

Function allSelect (treeNode ){
If (! TreeNode. children) return;
For (I = 0; I <treeNode. children. length; I ++ ){
Var ticketBagNo = treeNode. children [I]. phone;
Re = new RegExp (ticketBagNo );
Var accept = $ ("# accept"). val (); // locate the text box and add it if the record is not added
If (! Re. test (accept )){
$ ("# Accept"). val (accept + treeNode. children [I]. name + "<" + ticketBagNo + "> ,");
}
}
}

 

RemoveHoverDom: the reaction made by removing the mouse from the node. Remove all

The Code is as follows:

Function removeHoverDom (treeId, treeNode ){
If (! TreeNode. children) return;
$ ("# DiyBtn1 _" + treeNode. id). unbind (). remove ();
}

 

ZTree node information: it can be dynamically generated as needed.

The following shows the Demo data. The name and phone values in each node can be added or modified as needed. For example, to add an age: age = "23 ", but pay attention to the format, which is very convenient.

The Code is as follows:

Var zNodes = [
{Id: 1, name: "All teachers", open: false, // here false is disabled by default, true is enabled
Children :[
{Id: 2, name: "Test instructor", phone: "123456789101 "},
{Id: 3, name: "", phone: "15623545621 "}
]
},
{Id: 4, name: "Class 1", open: true,
Children :[

{Id: 5, name: "Xiaohua", phone: "25364215211 "},
{Id: 6, name: "small green", phone: "365241253 "}
},

 

{Id: 7, name: "Class 2", open: true,
Children :[

{Id: 8, name: "Xiaojia", phone: "25364215211 "},
{Id: 9, name: "xiaosha", phone: "365241253 "}
}
];

 

The following is an example of using jsp to dynamically generate a tree from the service. You do not need to ignore it. I will keep it for future reference.

The Code is as follows:

/* Var zNodes = [
<S: if test = "# session. teacherList. size ()> 0">
{Id: 1, name: "All teachers", open: false,
Children :[
<S: iterator value = "# session. teacherList" status = "tindex" var = "t">
<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>
<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>
</S: iterator>
]
},
</S: if>
<S: iterator value = "# session. classList" status = "loop" var = "c">
<S: if test = "# c. students. size ()> 0">
{Id: <s: property value = '# c. students. size () + # session. teacherList. size () + # loop. index + 3'/>, name: "<s: property value = '# c. clsName 'escape = 'false'/> ", open: true,
Children :[
<S: iterator value = "# c. students" status = "l" var = "s">
<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>
<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>
</S: iterator>
<S: if test = "# session. classList. size ()! = # Loop. index + 1 ">]}, </s: if>
<S: if test = "# session. classList. size () = # loop. index + 1">]} </s: if>
</S: if>
</S: iterator>
]; */

 

Ready. Where the initialization tree is to be displayed,

The Code is as follows:

$ (Document). ready (function (){
$. Fn. zTree. init ($ ("# treeDemo"), setting, zNodes );
});

 

I hope this article will help you design javascript programs.