JS infinite tree list implementation code_javascript skills

tree.js

Copy code The code is as follows:

/******************************
Tree Organization Framework List
v1.0
2011 1 Month 6
Author: flycrosscloud
*************************************/
//Initialization framework
var allImages = {
HasNodeClose: "", //Contains child nodes, closed state (not the last one)
HasNodeOpen: "", //Contains child nodes, open status (not the last one)
LastHasNodeClose: "", //Contains child nodes, closed state (the last one)
LastHasNodeOpen: "", //Contains child nodes, open Status (last one)
CommonNode: "", //Does not contain child nodes, ordinary node (not the last one)
LastCommonNode: "< img src='image/ftv2lastnode.gif'/>", //Does not contain child nodes, ordinary node (last one)
NodeLine: "" , //Connection between nodes
NodeClose: "", //Node closed status
NodeOpen: "", //Node open status
NodeBlank: ""//Blank connection
};
$( function ()
{
$.post("http://localhost/system/asmx/wsTree.asmx/HelloWorld", function (data) { InitTree(data); });
}) ;
function InitTree(org_data)
{
var org = eval("(" org_data ")");
drawtree(org, 1, "", "#nodeTree");
$("#nodeTree img").bind("click", function (event)
{
$(this).parent().find("ul").toggle();

});
}
function drawtree(org, s, pPreLine, ulname)
{
var orgLength = org.length;
var PreLine;
var count = s;

for (var i = 0; i < orgLength; i )
{
var NodeImg = allImages.NodeClose; //Pre-project icon
var PreNodeLine; //Project Connection before icon
//Determine the icon before the project
if (org[i].ChildUnits != null)//If it contains child nodes
{
NodeImg = allImages.NodeOpen;
}
//Determine the connection line before the graph
if ((org[i].ChildUnits != null) && (i == orgLength - 1))
{
//Contains child nodes and Is the last node of this layer
PreNodeLine = allImages.LastHasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i == orgLength - 1))
{
//Does not contain child nodes and is the last node of this layer
PreNodeLine = allImages.LastCommonNode;
}
if ((org[i].ChildUnits != null) && (i != orgLength - 1))
{
//Contains child nodes and is not the last node of this layer
PreNodeLine = allImages.HasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i != orgLength - 1))
{
//Does not contain child nodes and is not the last node of this layer
PreNodeLine = allImages.CommonNode;
}
if ( i == orgLength - 1)
{
PreLine = pPreLine allImages.NodeBlank;
}
else
{
PreLine = pPreLine allImages.NodeLine;
}
var temp = $("

" pPreLine PreNodeLine NodeImg "" org[i].unit_name "

");
$ (ulname).append(temp);
if (org[i].ChildUnits != null)
{
temp.append("

");
var content = temp.find("ul");
drawtree(org[i].ChildUnits, count 1, PreLine,content );
}
}

}

tree.css

Copy code The code is as follows:

li
{
vertical-align: middle;
font-size: 16px;
display: block;line-height: 22px;list-style-type: none;height: 22px;padding: 0px; margin:0px;
}
ul a
{
height:22px;
line-height:22px;
color:#123231;
text-decoration:none;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
img
{
vertical-align:middle;
cursor:pointer;
}
*
{
padding:0px;
margin:0px;
}

test.htm

Copy code The code is as follows:

< script src="../js/jquery-1.4.4.min.js" type="text/javascript">

< ;/body>

Test data format (json)

Copy code The code is as follows:

[{"unit_id":1,"unit_name":"First Level","father_unit_id":0,"ChildUnits":[{"unit_id":2, "unit_name":"Level 2","father_unit_id":1,"ChildUnits":[{"unit_id":3,"unit_name":"Level 3 1","father_unit_id":2,"ChildUnits":[{" unit_id":6,"unit_name":"Fourth level 1","father_unit_id":3,"ChildUnits":null},{"unit_id":7,"unit_name":"Fourth level 2","father_unit_id":3 ,"ChildUnits":null}]},{"unit_id":4,"unit_name":"Level 3 2","father_unit_id":2,"ChildUnits":[{"unit_id":8,"unit_name":" Level 4 3","father_unit_id":4,"ChildUnits":null},{"unit_id":9,"unit_name":"Level 4 4","father_unit_id":4,"ChildUnits":null}]}, {"unit_id":5,"unit_name":"Level 3 3","father_unit_id":2,"ChildUnits":[{"unit_id":10,"unit_name":"Level 4 5","father_unit_id":5 ,"ChildUnits":null},{"unit_id":11,"unit_name":"Level 4 6","father_unit_id":5,"ChildUnits":null}]}]},{"unit_id":12," unit_name":"Second Level 2","father_unit_id":1,"ChildUnits":null}]}]

My level is limited, so I thought about this stuff for several days before I came up with a semi-finished product. There are still some unresolved issues, so I’ll put them here for memo, and I hope experts can give me some advice.
Idea:
Use nested

tags to implement, use one
at each level, use
• nested
  for lower-level nodes, and implement it recursively. At the beginning, everything was done using
  • , but I found that it was too troublesome to achieve hidden appearance.
    Questions:
    1. The connection under IE is intermittent. I’m not familiar with CSS and haven’t figured it out yet. I feel it’s just fine, so I’m too lazy to do it anymore, haha.
    2. The front image needs to be changed when hidden and visible. This has not been implemented yet, but I feel that it is not a big problem.
    I won’t post the background code. Please leave a message if you need it. It’s actually very simple, but the recursive sorting of nodes is the troublesome part.
    Display effect: