JS Multilevel tree pops up a small window layer (very handy) instance code _javascript tips

Copy Code code as follows:

JScript files
var inputid, InputName;
function Expandsubcategory (Icategoryid, Fahterid) {

var li_father = document.getElementById ("li_" + Icategoryid);
if (li_father.getelementsbytagname ("Li"). Length > 0)//If the subordinate node is already loaded, expand it directly without having to read the data
{
Changestatus (Icategoryid);
Return
}

Display a little while open
Switchnote (Icategoryid, true);
Ajax callback function, load node
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";
Display a little while open
Switchnote (Icategoryid, true);
Ajax callback function, load node
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&LT;1)
//       {
if (dt. Rows[i]. Productstyle_ischild = = 1)//If no next level node is already
{
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 ("a");
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 subordinate 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");
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 (a);
Ul.appendchild (LI);
}
Li_father.appendchild (UL);
First show a little wait ...
Switchnote (Icategoryid, false);
}

Click response function for leaf node
function OpenDocument (Icategoryid, Action) {

Shut ();
Inputname.value = "ASDDSAFDF"; Before you modify
$ (InputName). attr (' value ', Action); New Tim
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");
A.href = "javascript:void (0);";
a.innerhtml = "Please wait ...";

Note.appendchild (IMG);
Note.appendchild (a);
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 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);
Show first level category when loading page
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 ' > Please select category <a href=\" #\ "title=\" close \ "onclick=\" shut () \ ">x</a> </div> ");
document.write ("<div id= ' catedivtree ' class= ' treemenu ' style= ')" Display:block;height:250px;overflow:auto; ' > ") ;
document.write ("</div></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 to this;
n = n-3;
var m = Math.floor (N/2);
for (var i = m < 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 2px; height:138px width:120px; border: #e1e1e1 solid 1px; float:left; position:relative; ov Erflow:hidden;}
. divimage {margin:2px 2px 2px 2px; height:100px width:116px; 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 a{}

. 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:104px border: #C8D3C4 3px solid; position:relative;}
. divcheckimg{width:119px; height:104px;}
. divremove{display:none Position:absolute; top:3px; right:3px;}

. divadd{display:none Position:absolute; top:3px; right:3px;}