Home > Developer > Web Develop
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>dtreeDemo</title>
<link href= "Dtree.css" Type=text/css rel=stylesheet>
<script src= "Dtreejscript.js" type=text/javascript></script>
<script type= "Text/javascript" >
function Checkradiobyid (ID) {
alert (ID);
}
</script>
<body>
<p><a href= "Javascript:d.openall (); > Open All </a> | <a href= "Javascript:d.closeall (); > Close all </a></p>
<script type= "Text/javascript" >
D = new Dtree ("D", "img/dtree/");
D.config.usecookies = false;//do not use cookies
D.config.usestatustext = true; Status bar display text
D.config.closesamelevel = true; Close other nodes at the same level
Root
D.add (0,-1, "Customer Relationship Management system");
First Level navigation
D.add (1, 0, "Customer Information", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (2, 0, "Customer service", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (3, 0, "Schedule/task", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (4, 0, "project Management", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (5, 0, "System Management", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (6, 0, "Data dictionary", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (7, 0, "message reminder", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
Level Two node
D.add (11,1, "Customer", "" "," "", "" "," "" "" "" "" Leftradio "," Radio "," "," ");
D.add (12,1, "Contacts", "" "," "", "" "," "" "" "" "," Leftradio "," Radio "," "," ");
D.add (21,2, "Customer complaint", "", "", "", "", "", "", "" "," Leftradio "," Radio "," "," ");
D.add (22,2, "Complaint report", "", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (31,3, "agenda", "", "" "," "," "," "," "," Leftradio "," Radio "," "," ");
D.add (32,3, "mission", "" "," "" "" "" "" "" "" "" "Leftradio", "Radio", "", "");
D.add (41,4, "Project Establishment", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (42,4, "Project Approval", "", "", "", "", "", "", "" "Leftradio", "Radio", "", "");
D.add (43,4, "Project Process", "", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (44,4, "project Summary", "", "", "", "", "", "" "," "Leftradio", "Radio", "", "");
D.add (45,4, "Project Transaction", "", "", "", "", "", "" "," "Leftradio", "Radio", "", "");
D.add (51,5, "User", "" "," "", "" "," "" "" "" "" Leftradio "," Radio "," "," ");
D.add (52,5, "role", "" "," "," "," "," "" "" "," Leftradio "," Radio "," "," ");
D.add (61,6, "Enterprise Type-category", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (62,6, "nature of enterprise-type", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (63,6, "Bank-category", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (64,6, "Source of information-category", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (65,6, "Customer Satisfaction-category", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (66,6, "Customer Level-category", "", "", "", "", "", "", "Leftradio", "Radio", "", "");
D.add (71,7, "Short Message", "" "," "," "," "," "," "," Leftradio "," Radio "," "," ");
document.write (d);
D.add (Id,pid,name,url,title,target);
ID: Number PID: Parent node Name: Url:url Address title: Header target: Jump frame; CheckName button name; Checktype: Button Type
</script>
</body>
：
1, dtree.css as follows:
/*--------------------------------------------------|
| Dtree 2.05 | www.destroydrop.com/javascript/tree/|
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr? |
|--------------------------------------------------*/
. dtree {
Font-family:verdana, Geneva, Arial, Helvetica, Sans-serif;
font-size:11px;
Color: #666;
White-space:nowrap;
}
. dtree img {
border:0px;
Vertical-align:middle;
}
. dtree a {
Color: #333;
Text-decoration:none;
}
. Dtree A.node,. Dtree A.nodesel {
White-space:nowrap;
padding:1px 2px 1px 2px;
}
. Dtree a.node:hover,. Dtree A.nodesel:hover {
Color: #333;
Text-decoration:underline;
}
. dtree A.nodesel {
Background-color: #c0d2ec;
}
. dtree. Clip {
Overflow:hidden;
}
2, Dtreejscript.js code as follows
function Node (ID, PID, name, URL, title, Target, icon, Iconopen, open, CheckName, Checktype, Car, Display) {
This.id = ID;
This.pid = pid;
THIS.name = name;
This.url = URL;
This.title = title;
This.target = target;
This.icon = icon;
This.iconopen = Iconopen;
This. CheckName = CheckName;
This. Checktype = Checktype;
This. Car = car;
This. display = display;
This._io = Open | | False
This._is = false;
This._ls = false;
THIS._HC = false;
This._ai = 0;
this._p;
};
function Dtree (objname) {
This.config = {
Target:null,
Folderlinks:true,
Useselection:true,
Usecookies:true,
Uselines:true,
Useicons:true,
Usestatustext:false,
Closesamelevel:false,
Inorder:false
}
This.icon = {
Root: ' Common/img/root.gif ',
Folder: ' Common/img/folder.gif ',
Folderopen: ' Common/img/folderopen.gif ',
Node: ' Common/img/page.gif ',
Empty: ' Common/img/empty.gif ',
Line: ' Common/img/line.gif ',
Join: ' Common/img/join.gif ',
Joinbottom: ' Common/img/joinbottom.gif ',
Plus: ' Common/img/plus.gif ',
Plusbottom: ' Common/img/plus.gif ',
Minus: ' Common/img/minus.gif ',
Minusbottom: ' Common/img/minus.gif ',
Nlplus: ' Common/img/plus.gif ',
Nlminus: ' Common/img/minus.gif '
};
This.obj = objname;
This.anodes = [];
This.aindent = [];
This.root = new Node (-1);
This.selectednode = null;
This.selectedfound = false;
this.completed = false;
};
DTree.prototype.add = function (ID, PID, name, URL, title, Target, icon, Iconopen, open, CheckName, Checktype, Car, Display ) {
This.anodes[this.anodes.length] = new Node (ID, PID, name, URL, title, Target, icon, Iconopen, open, CheckName, Checktype, Car, Display);
};
DTree.prototype.openAll = function () {
This.oall (TRUE);
};
DTree.prototype.closeAll = function () {
This.oall (FALSE);
};
dTree.prototype.toString = function () {
var str = ' <div class= ' dtree ' >\n ';
if (document.getElementById) {
if (this.config.useCookies) This.selectednode = this.getselected ();
str + = This.addnode (this.root);
} else str + = ' Browser not supported. ';
str + = ' </div> ';
if (!this.selectedfound) This.selectednode = null;
This.completed = true;
return str;
};
DTree.prototype.addNode = function (pnode) {
var str = ';
var n=0;
if (this.config.inOrder) n = pnode._ai;
for (n; n<this.anodes.length; n++) {
if (this.anodes[n].pid = = pnode.id) {
var cn = This.anodes[n];
Cn._p = Pnode;
Cn._ai = n;
This.setcs (CN);
if (!cn.target && this.config.target) cn.target = This.config.target;
if (CN._HC &&!cn._io && this.config.useCookies) cn._io = This.isopen (cn.id);
if (!this.config.folderlinks && cn._hc) cn.url = null;
if (this.config.useSelection && cn.id = = This.selectednode &&!this.selectedfound) {
Cn._is = true;
This.selectednode = n;
This.selectedfound = true;
}
str + = This.node (cn, N);
if (Cn._ls) break;
}
}
return str;
};
DTree.prototype.node = function (node, nodeId) {
var car = node. CheckName + node.name;
var str = ' <div id= ' + car + ' "name=" ' + node. Car + ' div ' class= "dtreenode" style= "Display:" > ' + this.indent (node, nodeId);
if (this.config.useIcons) {
if (!node.icon) Node.icon = (This.root.id = = node.pid)? This.icon.root: ((NODE._HC) this.icon.folder:this.icon.node);
if (!node.iconopen) Node.iconopen = (NODE._HC)? This.icon.folderOpen:this.icon.node;
if (this.root.id = = node.pid) {
Node.icon = This.icon.root;
Node.iconopen = This.icon.root;
}
str + = ' ';
} if (Node.icon = = This.icon.node) {str + = ' <input name= ' + node. CheckName + ' "id=" ' + node.id + ' "value=" ' + Node.name + ' "type=" ' + node. Checktype + ' onclick= ' Checkradiobyid (' + node.id + ') "style=" Display: ' + node. Display + '; ' > ';} else if (Node.url) {
str + = ' <a id= "s ' + this.obj + nodeId + '" class= "' + ((this.config.useSelection)? (node._is? ' Nodesel ': ' node '): ' node ') + ' "href=" # ";
if (node.title) str + = ' title= ' + node.title + ' ";
if (node.target) str + = ' target= ' + node.target + ' ";
if (this.config.useStatusText) str + = ' onmouseover= ' window.status=\ ' + node.name + ' \ '; return true; ' onmouseout= ' window . status=\ '; return true; " ‘;
if (This.config.useSelection && ((NODE._HC && this.config.folderLinks) | |!node._hc))
str + = ' onclick= ' javascript: ' + This.obj + '. S (' + nodeId + '); ";
str + = ' > ';
}
else if ((!this.config.folderlinks | |!node.url) && NODE._HC && node.pid! = this.root.id)
str + = ' <a href= ' javascript: ' + this.obj + '. O (' + nodeId + '); "class=" Node ">";
str + = Node.name.split ("|") [0];
if (Node.url | | ((!this.config.folderlinks | |!node.url) && NODE._HC)) str + = ' </a> ';
str + = ' </div> ';
if (NODE._HC) {
str + = ' <div id= "d ' + this.obj + nodeId + '" class= "clip" style= "Display: ' + ((this.root.id = Node.pid | | node._io)? ' Block ': ' None ') + '; ' > ';
str + = This.addnode (node);
str + = ' </div> ';
}
This.aIndent.pop ();
return str;
};
dTree.prototype.indent = function (node, nodeId) {
var str = ';
if (this.root.id! = node.pid) {
for (var n=0; n<this.aindent.length; n++)
str + = ' (Node._ls)? This.aIndent.push (0): This.aIndent.push (1);
if (NODE._HC) {
str + = ' <a href= ' javascript: ' + this.obj + '. O (' + nodeId + '); " >if (!this.config.uselines) str + = (node._io)? This.icon.nlMinus:this.icon.nlPlus;
else str + = ((node._io)? ((Node._ls && this.config.useLines) This.icon.minusBottom:this.icon.minus): ((Node._ls && This.config.useLines)? This.icon.plusBottom:this.icon.plus));
str + = '/></a> ';
} else str + = ' ';
}
return str;
};
DTree.prototype.setCS = function (node) {
var LastID;
for (var n=0; n<this.anodes.length; n++) {
if (this.anodes[n].pid = = node.id) NODE._HC = true;
if (this.anodes[n].pid = = node.pid) LastID = this.anodes[n].id;
}
if (lastid==node.id) Node._ls = true;
};
dTree.prototype.getSelected = function () {
var sn = this.getcookie (' cs ' + this.obj);
Return (SN)? Sn:null;
};
DTREE.PROTOTYPE.S = function (ID) {
if (!this.config.useselection) return;
var cn = This.anodes[id];
if (CN._HC &&!this.config.folderlinks) return;
if (This.selectednode! = ID) {
if (This.selectednode | | this.selectednode==0) {
Eold = document.getElementById ("s" + This.obj + this.selectednode);
Eold.classname = "Node";
}
Enew = document.getElementById ("s" + This.obj + ID);
Enew.classname = "Nodesel";
This.selectednode = ID;
if (this.config.useCookies) This.setcookie (' CS ' + this.obj, cn.id);
}
};
DTREE.PROTOTYPE.O = function (ID) {
var cn = This.anodes[id];
This.nodestatus (!cn._io, ID, Cn._ls);
Cn._io =!cn._io;
if (this.config.closeSameLevel) This.closelevel (CN);
if (this.config.useCookies) This.updatecookie ();
};
DTree.prototype.oAll = function (status) {
for (var n=0; n<this.anodes.length; n++) {
if (THIS.ANODES[N]._HC && this.anodes[n].pid! = this.root.id) {
This.nodestatus (status, N, This.anodes[n]._ls)
This.anodes[n]._io = status;
}
}
if (this.config.useCookies) This.updatecookie ();
};
DTree.prototype.openTo = function (NId, bselect, Bfirst) {
if (!bfirst) {
for (var n=0; n<this.anodes.length; n++) {
if (this.anodes[n].id = = nId) {
Nid=n;
Break
}
}
}
var Cn=this.anodes[nid];
if (cn.pid==this.root.id | |!cn._p) return;
Cn._io = true;
Cn._is = bselect;
if (this.completed && CN._HC) This.nodestatus (True, Cn._ai, Cn._ls);
if (this.completed && bselect) this.s (Cn._ai);
else if (bselect) This._sn=cn._ai;
This.opento (Cn._p._ai, False, true);
};
DTree.prototype.closeLevel = function (node) {
for (var n=0; n<this.anodes.length; n++) {
if (this.anodes[n].pid = = Node.pid && this.anodes[n].id! = node.id && this.anodes[n]._hc) {
This.nodestatus (False, N, This.anodes[n]._ls);
This.anodes[n]._io = false;
This.closeallchildren (This.anodes[n]);
}
}
}
DTree.prototype.closeAllChildren = function (node) {
for (var n=0; n<this.anodes.length; n++) {
if (this.anodes[n].pid = = Node.id && this.anodes[n]._hc) {
if (This.anodes[n]._io) This.nodestatus (False, N, This.anodes[n]._ls);
This.anodes[n]._io = false;
This.closeallchildren (This.anodes[n]);
}
}
}
DTree.prototype.nodeStatus = function (status, ID, bottom) {
ediv= document.getElementById (' d ' + this.obj + ID);
ejoin= document.getElementById (' j ' + This.obj + ID);
if (this.config.useIcons) {
eicon= document.getElementById (' i ' + this.obj + ID);
EICON.SRC = (status)? This.anodes[id].iconopen:this.anodes[id].icon;
}
EJOIN.SRC = (this.config.useLines)?
(status)? ((bottom) this.icon.minusBottom:this.icon.minus):((bottom) this.icon.plusBottom:this.icon.plus)):
(status) this.icon.nlMinus:this.icon.nlPlus);
EDiv.style.display = (status)? ' Block ': ' None ';
};
DTree.prototype.clearCookie = function () {
var now = new Date ();
var yesterday = new Date (Now.gettime ()-1000 * 60 * 60 * 24);
This.setcookie (' Co ' +this.obj, ' Cookievalue ', yesterday);
This.setcookie (' CS ' +this.obj, ' Cookievalue ', yesterday);
};
DTree.prototype.setCookie = function (CookieName, cookievalue, expires, path, domain, secure) {
Document.cookie =
Escape (cookiename) + ' = ' + Escape (cookievalue)
+ (expires?) ‘; Expires= ' + expires.togmtstring (): ')
+ (path?) ‘; Path= ' + path: ')
+ (domain? ‘; Domain= ' + domain: ')
+ (secure?) ‘; Secure ': ');
};
DTree.prototype.getCookie = function (cookiename) {
var cookievalue = ';
var posname = Document.cookie.indexOf (Escape (cookiename) + ' = ');
if (posname! =-1) {
var posvalue = Posname + (Escape (cookiename) + ' = '). Length;
var endpos = document.cookie.indexOf ('; ', posvalue);
if (endpos! =-1) cookievalue = unescape (document.cookie.substring (Posvalue, endpos));
else Cookievalue = unescape (document.cookie.substring (Posvalue));
}
return (Cookievalue);
};
DTree.prototype.updateCookie = function () {
var str = ';
for (var n=0; n<this.anodes.length; n++) {
if (this.anodes[n]._io && this.anodes[n].pid! = this.root.id) {
if (str) str + = '. ';
str + = This.anodes[n].id;
}
}
This.setcookie (' Co ' + this.obj, str);
};
DTree.prototype.isOpen = function (ID) {
var aOpen = This.getcookie (' Co ' + this.obj). Split ('. ');
for (var n=0; n<aopen.length; n++)
if (aopen[n] = = ID) return true;
return false;
};
if (! Array.prototype.push) {
Array.prototype.push = function Array_push () {
for (Var i=0;i<arguments.length;i++)
This[this.length]=arguments[i];
return this.length;
}
};
if (! Array.prototype.pop) {
Array.prototype.pop = function Array_pop () {
Lastelement = This[this.length-1];
This.length = Math.max (this.length-1,0);
return lastelement;
}
};
A very useful jQuery Dtree tree chart (with radio button and checkbox button) (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
