Js multi-level tree pop-up a small window layer (very useful) instance code

Copy codeThe Code is as follows: // JScript File
Var inputID, inputName;
Function ExpandSubCategory (iCategoryID, FahterID ){

Var li_father = document. getElementById ("li _" + iCategoryID );
If (li_father.getElementsByTagName ("li"). length> 0) // if a lower-level node has been loaded, expand directly without reading data.
{
ChangeStatus (iCategoryID );
Return;
}

// Wait a moment when opening
SwitchNote (iCategoryID, true );
// AJAX callback function to load nodes
Used_car.BLL.T_BrandBaby.GetList ("dm = 'brand' and fID =" + iCategoryID, GetSubCategory_callback );
}
Function ExpandSubCategoryAgain (iCategoryID, FahterID ){

Var li_father = document. getElementById ("li _" + iCategoryID );
Li_father.className = "Opened ";
// Wait a moment when opening
SwitchNote (iCategoryID, true );
// AJAX callback function to load nodes
Used_car.BLL.T_BrandBaby.GetList ("dm = 'brand' and fID =" + iCategoryID, GetSubCategory_callback );
}
Function GetSubCategory_callback (response ){
Var dt = response. value. Tables [0];
If (dt. Rows. length> 0 ){
Var iCategoryID = dt. Rows [0]. fID; // parent ID
}
Var li_father = document. getElementById ("li _" + iCategoryID );
Var ul_sub = document. getElementById ("ulTree _" + iCategoryID );
If (ul_sub! = Null ){
Li_father.removeChild (ul_sub)
}
Var ul = document. createElement ("ul ");
Ul. id = "ulTree _" + iCategoryID
For (var I = 0; I <dt. Rows. length; I ++ ){
If (used_car.BLL.T_BrandBaby.GetList ("dm = 'brand' and fID =" + dt. Rows [I]. id). value. Tables [0]. Rows. length <1)
//{
// If (dt. Rows [I]. ProductStyle_IsChild = 1) // if no lower-level node exists
{
Var li = document. createElement ("li ");
Li. className = "Child ";
Li. id = "li _" + dt. Rows [I]. id;

Var img = document. createElement ("img ");
Img. id = dt. Rows [I]. id;
Img. className = "s ";
Img. src = ".../../css/s.gif ";

Var a = document. createElement ("");
Var id = dt. Rows [I]. id;

A. href = "javascript: OpenDocument ('" + dt. rows [I]. id + "','" + dt. rows [I]. name + "');";
A. innerHTML = dt. Rows [I]. name. sub (14 );
A. title = dt. Rows [I]. name;
}
Else // if there are lower-level nodes
{
Var li = document. createElement ("li ");
Li. className = "Closed ";
Li. id = "li _" + dt. Rows [I]. id;

Var img = document. createElement ("img ");
Img. id = dt. Rows [I]. id;
Img. className = "s ";
Img. src = ".../../css/s.gif ";
Img. onclick = function (){
ExpandSubCategory (this. id );
};
Img. alt = "Expand/collapse ";

Var a = document. createElement ("");
A. href = "javascript: ExpandSubCategory (" + dt. Rows [I]. id + ", 'editcate ');";
A. innerHTML = dt. Rows [I]. name. sub (14 );
A. title = dt. Rows [I]. name;
}
Li. appendChild (img );
Li. appendChild ();
Ul. appendChild (li );
}
Li_father.appendChild (ul );
// Wait until it is displayed...
SwitchNote (iCategoryID, false );
}

// Click the response function of the leaf node
Function OpenDocument (iCategoryID, Action ){

Shut ();
// InputName. Value = "asddsafdf"; // before modification
$ (InputName). attr ('value', Action); // Add
Var thisID = inputName. getAttribute ("id ");
// Alert (inputName. value + ":" + thisID + "--" + Action + "--" + iCategoryID );
InputID. value = iCategoryID;
ClienkButton1 ();

}
Function ChangeStatus (iCategoryID ){
Var li_father = document. getElementById ("li _" + iCategoryID );

If (li_father.className = "Opened "){
Li_father.className = "Closed ";
}
Else {
Li_father.className = "Opened ";
}
}
Function ChangeStatus2 (iCategoryID ){
Var li_father = document. getElementById ("li _" + iCategoryID );
If (li_father.className = "Closed "){
Li_father.className = "Opened ";
}
}
Function switchNote (iCategoryID, show ){
Var li_father = document. getElementById ("li _" + iCategoryID );
If (show ){
Var ul = document. createElement ("ul ");
Ul. id = "ul_note _" + iCategoryID;

Var note = document. createElement ("li ");
Note. className = "Child ";

Var img = document. createElement ("img ");
Img. className = "s ";
Img. src = ".../../css/s.gif ";

Var a = document. createElement ("");
A. href = "javascript: void (0 );";
A. innerHTML = "Please wait ...";

Note. appendChild (img );
Note. appendChild ();
// Ul. appendChild (note );
Li_father.appendChild (ul );
}
Else {
Var ul = document. getElementById ("ul_note _" + iCategoryID );
If (ul ){
Li_father.removeChild (ul );
}
}
}

Function InitTree (obj, idObj, FatherID ){

// Load the root node
// WriteDiv ();
// Alert (obj. value + "--" + idObj. value );
InputName = obj;
InputID = idObj;
Var pos = getPosition (inputName );
Var tree = document. getElementById ("cateDivTree ");
Var root = document. createElement ("li ");
Var objshow = document. getElementById ("opencateDiv ");
Objshow. style. top = pos [1] + pos [3] + "px ";
Objshow. style. left = pos [0] + "px ";
Objshow. style. display = "block ";
Tree. style. display = "block ";
Root. id = "li _" + FatherID;
Tree. appendChild (root );
// The first category is displayed when the page is loaded.
ExpandSubCategory (FatherID );
ChangeStatus2 (FatherID );
}
WriteDiv ();
Function writeDiv (){
Document. write ("<div id = 'opencatediv 'style = 'position: absolute; display: none; z-index: 1000; width: 200px; height: 250px;'> ");
Document. write ("<div class = 'divclose'> select a Category <a href = \" # \ "title = \" close \ "onclick = \" shut () \ "> × </a> </div> ");
Document. write ("<div id = 'catedivtree' class = 'treemenu' style = 'display: block; height: 250px; overflow: auto; '> ");
Document. write ("</div> ");

}
Function getPosition (obj ){
If (obj ){
Var w = obj. offsetWidth;
Var h = obj. offsetHeight;
If (obj. offsetParent ){
For (var posX = 0, posY = 0; obj. offsetParent; obj = obj. offsetParent ){
PosX + = obj. offsetLeft;
PosY + = obj. offsetTop;
}
Return [posX, posY, w, h];
} Else {
Return [obj. x, obj. y, w, h];
}
} Else {
Return [0, 0, 0, 0];
}
}
Function shut (){
Close11 ();
}
Function close11 (){
Var objshow = document. getElementById ("opencateDiv ");
Objshow. style. display = "none"
Objshow. style. top = 0;
Objshow. style. left = 0;
}
Function Opent11 (){
Var objshow = document. getElementById ("opencateDiv ");
Objshow. style. display = "block ";
}
String. prototype. sub = function (n ){
Var r =/[^ \ x00-\ xff]/g;
If (this. replace (r, "mm"). length <= n) return this;
N = n-3;
Var m = Math. floor (n/2 );
For (var I = m; I <this. length; I ++ ){
If (this. substr (0, I). replace (r, "mm"). length> = n ){
Return this. substr (0, I) + "...";
}
}
Return this;
};

2 // Style

. TreeMenu {border: #006600 solid 1px; background-color: # ffffff; height: 350px; overflow: auto ;}
. TreeMenu img. s
{
Cursor: hand;
Vertical-align: middle;
}
. TreeMenu. s_1
{
Cursor: pointer;
Vertical-align: middle;
Padding-left: 5px;
}
. TreeMenu ul
{
Padding: 0;
}
. TreeMenu li
{
List-style: none;
Padding: 0;
}
. Closed ul
{
Display: none;
}
. Child img. s
{
Background: none;
Cursor: default;
}

. TreeMenu ul
{
Margin: 0 0 0 8px;
}
. TreeMenu img. s
{
Width: 34px;
Height: 18px;
}
. TreeMenu. Opened img. s
{
Background: url (../images/skin3/opened.gif) no-repeat 0 1px;
}
. TreeMenu. Closed img. s
{
Background: url (../images/skin3/closed.gif) no-repeat 0 1px;
}
. TreeMenu. Child img. s
{
Background: url (../images/skin3/child.gif) no-repeat 15px;
}
. DivClose {background-color: # fff; height: 21px; text-align: right; border: #006600 solid 1px; border-bottom: #006600 none 1px; background-color: # ECF6E9 ;}
# RightCate {height: 350px; border: #006600 solid 1px; margin-left: 10px ;}
. AllopStyle {background-color: # fafafa; border-top: # e1e1e1 solid 1px; border-left: # e1e1e1 solid 1px; border-right: # e1e1e1 solid 1px; width: 99%;
Padding: 2px; margin-top: 5px; margin-left: 2px; text-align: left; line-height: 23px;
}
. PageStyle {background-color: # fafafa; border: # e1e1e1 solid 1px; width: 98%; padding: 2px; margin-left: 2px; text-align: center ;}

. DivFile {margin: 2px 2px 2px; height: 138px; width: 120px; border: # e1e1e1 solid 1px; float: left; position: relative; overflow: hidden ;}
. DivImage {margin: 2px 2px 2px; height: 100px; width: pixel PX; border: #000 solid 1px ;}
. DivImage img {cursor: hand; width: 134px; height: 100px ;}

. DivPage {border: # e1e1e1 solid 1px; margin: 10px 10px 10px 10px ;}
. DivPage span {padding: 4px 4px 4px 4px ;}
. DivPage span {}

. On a {color: # f00 ;}
. CheckedTab {background-image: url (.. /images/partyCurrent.gif); width: 105px; height: 28px; cursor: hand; text-align: center; font-size: small; border: 1px solid # e1e1e1 ;}
. NoCheckTab {width: 105px; height: 28px; cursor: hand; text-align: center; font-size: small; border: 1px solid # e1e1e1 ;}

. DivCheckItem {float: left; width: 119px; height: pixel PX; border: # C8D3C4 3px solid; position: relative ;}
. DivCheckImg {width: 119px; height: pixel PX ;}
. DivRemove {display: none; position: absolute; top: 3px; right: 3px ;}

. DivAdd {display: none; position: absolute; top: 3px; right: 3px ;}