The plug-in automatically parses the element hierarchy and converts it to a zTree tree node set. Note that the container ID of the page element must be specified.
Plug-in code:
| The code is as follows: |
Copy code |
/*!
* Function Name: zTree plugin (zTree plug-in)
* Function Desc: this plug-in is mainly used to directly convert some elements similar to the zTree structure in the page to the zTree control for operations.
* This plug-in automatically parses the element hierarchy and converts it to a zTree tree node set. Note that the container ID of the page element must be specified.
* Author: stepday
* Author's WebSite: http://www.stepday.com
* Create Date: 2014-06-16
*/
(Function ($ ){
// Set a global tree node variable to solve the problem of invalid parameters for passing reference types between js methods
Var zNodes = null;
// Obtain the set of ztree class for all containers on the page
Function FindZTreeContainer (){
Return $ (". ztree ");
}
// Recursively construct the node hierarchy of the zTree
Function DepthFindNodes (htmlNode, id, pId ){
For (var I = 0; I If (htmlNode. children [I]. localName = "ul "){
Var newPID = pId;
If (htmlNode. children [I]. nodeValue! = Null ){
Var node = new Object ();
Node. id = id;
Node. pId = pId;
Node. name = htmlNode. children [I]. nodeValue;
ZNodes. push (node );
NewPID = id;
Id ++;
}
If (htmlNode. children [I]. children. length> 0 ){
DepthFindNodes (htmlNode. children [I], id, newPID );
}
} Else if (htmlNode. children [I]. localName = "li "){
Var newPID = pId;
If (htmlNode. children [I]. outerText! = Null ){
Var node = new Object ();
Node. id = id;
Node. pId = pId;
Var nodeName = htmlNode. children [I]. outerText;
Var indexOf = nodeName. indexOf ('N ');
If (indexOf> 0 ){
// Get the node name by truncation
NodeName = nodeName. substring (0, indexOf );
}
Node. name = nodeName;
ZNodes. push (node );
NewPID = id;
Id ++;
}
If (htmlNode. children [I]. children. length> 0 ){
DepthFindNodes (htmlNode. children [I], id, newPID );
}
}
}
}
// Obtain the node structure
Function GetTreeNodes (htmlNode, id, pId ){
If (htmlNode. children. length> 0 ){
ZNodes = new Array ();
DepthFindNodes (htmlNode, id, pId );
}
Else
Return null;
}
/// Conversion operation
$. Fn. ConvertToZTree = function (){
// Obtain all elements marked as the ztree attribute on the page
Var divList = FindZTreeContainer ();
For (var I = 0; I <divList. length; I ++ ){
GetTreeNodes (divList [I], 1, 0 );
Var contianerId = divList [I]. id;
If (contianerId. length = 0 ){
Console. log ("page number" + (I + 1). toString () + "tree container has not set the id attribute ");
} Else {
$. Fn. zTree. init ($ ("#" + divList [I]. id), setting, zNodes );
}
}
};
}) (JQuery ); |
Html code:
| The code is as follows: |
Copy code |
<! DOCTYPE html>
<Html>
<Head>
<Title> ZTREE plug-in-directly converts all the containers whose classes are ztree into zTree controls. </title>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" href = "css/demo.css" type = "text/css">
<Link rel = "stylesheet" href = "css/zTreeStyle/zTreeStyle.css" type = "text/css">
<Script type = "text/javascript" src = "js/jquery-1.4.4.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ztree. All-3.5.js"> </script>
<Script type = "text/javascript" src = "js/ContainerConverToZTree. js"> </script>
<Style>
Div
{
Border: 1px solid #777777;
Margin-top: 5px;
}
</Style>
</Head>
<Body>
<H1>
ZTREE plug-in-directly convert all containers whose classes are ztree into zTree controls. <Div id = "zTreeOne" class = "ztree">
<Ul>
Hi!
<Li> paid-in capital
<Ul>
<Li> subnode 1 </li>
<Li> subnode 2 </li>
</Ul>
</Li>
<Li> capital accumulation </li>
<Li> current year's profit </li>
<Li> profit distribution </li>
</Ul>
</Div>
<Div id = "zTreeTwo" class = "ztree">
<Ul>
<Li> owner equity
<Ul>
<Li> paid-in capital </li>
<Li> capital accumulation </li>
<Li> current year's profit </li>
<Li> profit distribution </li>
</Ul>
</Li>
<Li> assets </li>
<Li> liabilities </li>
<Li> Cost </li>
<Li> profit and loss </li>
</Ul>
</Div>
<Script type = "text/javascript" language = "javascript">
// Basic configuration of zTree
Var setting = {
Data :{
SimpleData :{
Enable: true
}
}
};
/// Page initialization
$ (Document). ready (function (){
$ (Document). ConvertToZTree ();
});
</Script>
</Body>
</Html> |
