Dtree Web page Tree menu and Transfer objects to the JS, dynamically generate node _javascript skills

At the WinForm end, the tree menu is very useful to implement this is very convenient, so I think of the page into a tree menu. I chose dtree This tool, there are many ways to implement the Web page tree menu, but I think this is more useful, and the configuration is relatively simple, use on the start quickly. Dtree is pure JS, so do not import jar package, and configuration as long as in the JS configuration is good. And now the network has a lot of master modified version, add a checkbox, more convenient. In the development process, the most difficult is the data interaction, because Dtree is pure JS, so there is no background interaction method, my approach is to first through the background interaction, the data passed to the page, and then passed to JS. Background passed to the page of the data I spliced into a string, and then cut in JS, the data integration of the number of groups.
Background Data processing code:

Copy Code code as follows:

Codepublic String Getlinkmanbydid () {
try {
directories = This.directoryService.GetAllDirecoty ();
Selectlinkmans = This.linkManService.GetAllLinkMans ();
String direstringstring = "";
String linkstring = "";
for (int i = 0; i < directories.size (); i++) {
if (I<directories.size ()-1) {
Direstringstring+=directories.get (i). GetID () + "-" +directories.get (i) getdirectoryname () + "+";
}
else {
Direstringstring+=directories.get (i). GetID () + "-" +directories.get (i) getdirectoryname ();
}
}
for (int i = 0; i < selectlinkmans.size (); i++) {
if (I<selectlinkmans.size ()-1) {
Linkstring+=selectlinkmans.get (i). Getdirectory (). GetID () + "-" +selectlinkmans.get (i). GetName () + "-" + Selectlinkmans.get (i). Getphonenum () + "+";
}
else {
Linkstring+=selectlinkmans.get (i). Getdirectory (). GetID () + "-" +selectlinkmans.get (i). GetName () + "-" + Selectlinkmans.get (i). Getphonenum ();
}
}
Actioncontext.getcontext (). GetSession (). Put ("directories", direstringstring);
Actioncontext.getcontext (). GetSession (). Put ("Alllinkmans", linkstring);
catch (Exception e) {
E.printstacktrace ();
}
return SUCCESS;
}

I use the s2sh, so the data stored in the session is the way
Actioncontext.getcontext (). GetSession (). Put (key, value)
The page then gets the data:

Copy Code code as follows:

<script type= "Text/javascript" >
var linkmans= [];
var dires = [];
Linkmans = "${directories}". Replace (' [', ' '). Replace ('] ', '). Split (', ');
linkmans= "${alllinkmans}". Split (', ');
Dires = "${directories}". Split (', ');
Treeload (Linkmans[0],dires[0]);
</script>

Treeload is the method of a JS file I wrote myself.
Js:

Copy Code code as follows:

CodeFunction treeload (Linkmans, dires) {
var linklist= string2linklist (Linkmans);
var direslist = string2direlist (dires);
D = new Dtree (' d ', './');
d.config.checkbox=true;//Display checkbox
D.config.objvalueid= ' phonenums ';
D.icon.root= ' Images/hr/home.png ',
D.icon.folder= ' Images/hr/group.gif ',
D.icon.folderopen= ' Images/hr/group.gif ',
D.icon.node= ' Images/hr/nan.gif ',
D.add (0,-1, ' contact ', null);
var int = 0;
var direids = new Array ();
var direpid= new Array ();
for (int; int < direslist.length; int++) {
D.add (Int+1,0,direslist[int].name,false);
Direids.push (direslist[int].id);
Direpid.push (int+1);
}
D.add (int+1,0, ' All contacts ', false);
Direpid.push (int+1);
for (var int2 = 0; Int2 < linklist.length; int2++) {
for (var int3 = 0; Int3 < direpid.length-1; int3++) {
if (Linklist[int2].did==direids[int3])
{
int++;
D.add (Int+1,direpid[int3],linklist[int2].name,false,linklist[int2].phone);
}
}
}
for (var int4 = 0; int4 < linklist.length; int4++) {
int++;
D.add (Int+1,direpid[direpid.length-1],linklist[int4].name,false,linklist[int4].phone);
}

document.write (d);
}
function String2linklist (Linkmans) {
var linkarray = new Array ();
var a = linkmans.split (' + ');
Alert (a[0]);
for (var int = 0; int < a.length; int++) {
var B = a[int].split ('-');
Alert (b[2]);
Linkarray.push (New Linkman (b[0],b[1],b[2));
}
return linkarray;
}
function String2direlist (dires) {
var direlist = new Array ();
var a = dires.split (' + ');
for (var int = 0; int < a.length; int++) {
var B = a[int].split ('-');
Alert (b[1]);
Direlist.push (new Dire (b[0],b[1));
}
return direlist;
}
function Linkman (did,name,phone) {
This.did = did;
THIS.name = name;
This.phone=phone;
}
function dire (ID, name) {
this.id= ID;
THIS.name = name;
}

Finally, the effect chart

I rewrote the Dtree JS:

Copy Code code as follows:

Node Object
function Node (ID, PID, name, checked, value, icon, URL, title, Target, Iconopen, open) {
This.id = ID;
This.pid = pid;
THIS.name = name;
Whether to add a check box to the node and set the selected state, true: checked, false: unchecked, null: Do not add
this.checked = checked==null?null: (Checked | | FALSE);

This.value = value;//Add Value property, check box, the input box is the value
This.url = URL;
This.title = title;
This.target = target;
This.icon = icon;
This.iconopen = Iconopen;
This._io = Open | | False
This._is = false;
This._ls = false;
THIS._HC = false;
This._ai = 0;
this._p;
};
Tree Object
function Dtree (objname, path) {
Path
This.path = Path | | ';
Load CSS File
This.loadcssfile (this.path+ ' dtree.css ');
This.config = {
Target:null,
Folderlinks:true,
Useselection:true,
Usecookies:true,
Uselines:true,
Useicons:true,
Usestatustext:false,
Closesamelevel:false,
Inorder:false,
Display check boxes, True displays, False does not show
Checkbox:false,
Objvalueid: '
}
This.icon = {
Root:this.path + ' images/img/base.gif ',
Folder:this.path + ' images/img/folder.gif ',
FolderOpen:this.path + ' images/img/folderopen.gif ',
Node:this.path + ' images/img/page.gif ',
Empty:this.path + ' images/img/empty.gif ',
Line:this.path + ' images/img/line.gif ',
Join:this.path + ' images/img/join.gif ',
JoinBottom:this.path + ' images/img/joinbottom.gif ',
Plus:this.path + ' images/img/plus.gif ',
PlusBottom:this.path + ' images/img/plusbottom.gif ',
Minus:this.path + ' images/img/minus.gif ',
MinusBottom:this.path + ' images/img/minusbottom.gif ',
NlPlus:this.path + ' images/img/nolines_plus.gif ',
NlMinus:this.path + ' images/img/nolines_minus.gif '
};
This.obj = objname;
This.anodes = [];
This.aindent = [];
This.root = new Node (-1);
This.selectednode = null;
This.selectedfound = false;
this.completed = false;
};
Set the selected node
Dtree.prototype.checkednodes=function () {
if (this.config.objvalueid== ') {
Return
}
var Val=document.getelementbyid (this.config.objValueId). value;
if (val== ') {
Return
}
Val=val.split (', ');
var o=null;
for (Var i=0;i<val.length;i++) {
O=document.getelementbyid (' Cbx_ ' +this.obj+val[i]);
if (o) {
O.checked=true;
}
}
};
Implement the value of automatically entering the selected item in the input box
Dtree.prototype.update=function () {
if (this.config.objvalueid== ') {
Return
}
var cbx=null,v=[];
V.push (AA);
var ns=this.anodes;
for (Var i=0;i<ns.length;i++) {
Cbx=document.getelementbyid (' cbx_ ' +this.obj+ns[i].id);
if (CBX) {
if (cbx.checked) {
if (ns[i].pid!= ' 0 ') {
V.push (Cbx.value);//Originally the ID of the node, replaced by value, you can select the contact, get the number.
}
}
}
}
document.getElementById (this.config.objValueId). Value=v.join ();
};
Load CSS File
Dtree.prototype.loadcssfile=function (file) {
try{
var head=document.getelementsbytagname ("head") [0];
var links=head.getelementsbytagname (' link ');
var i=0;
for (Var i=0;i<links.length;i++) {
if (Links[i].getattribute (' href '). toLowerCase (). IndexOf (File.tolowercase ()) >-1) {
Return
}
}
var f = document.createelement ("link");
F.setattribute ("rel", "stylesheet");
F.setattribute ("type", "text/css");
F.setattribute ("href", file);
Head.appendchild (f);
}catch (ex) {
Alert (' Error loading CSS file: ' +ex.message ');
}
};
Adds A new node to the node array
DTree.prototype.add = function (ID, PID, name, checked, Value,icon,url, title, Target,iconopen, open) {
This.anodes[this.anodes.length] = new Node (ID, PID, name, checked, Value,icon,url, title, Target, Iconopen, open);
};
Open/close all nodes
DTree.prototype.openAll = function () {
This.oall (TRUE);
};
DTree.prototype.closeAll = function () {
This.oall (FALSE);
};
Outputs the tree to the page
dTree.prototype.toString = function () {
var str = ' <div class= ' dtree ' id= ' dtree_ ' +this.obj+ ' >\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;
};
Creates the tree structure
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;
};
Creates the node icon, URL and text
DTree.prototype.node = function (node, nodeId) {
var str = ' <div class= ' dtreenode ' > ' + this.indent (node, nodeId);
if (this.config.useIcons) {

if (!node.icon) Node.icon = (This.root.id = = node.pid)? This.icon.root: ((node.pid==0)? this.icon.folder:this.icon.node);
Node.pid==0 This condition is my own change, if no one in the group, or with the group icon, rather than contact the icon, we can try their own
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 + + ' }
/*** Add checkbox Display ***/
if (this.config.checkbox&&node.checked!=null) {
str = ' <input ' + (node.checked?) Checked=\ "checked\" ': ') + ' onclick=\ ' javascript: ' + this.obj + node._hc &&node.pid-!=? '. O (' + nodeId + ') ': '. Update () ') + '; \ "type=\" checkbox\ "value=\" ' +node.value+ ' \ ' name=\ ' cbx_ ' +this.obj+ ' \ ' id=\ ' cbx_ ' + This.obj + nodeid+ ' title=\ ' +node.name+ ' \/> ';
}
if (Node.url) {
str = ' <a id= ' s ' + this.obj + nodeId + ' "class=" ' + ((this.config.useSelection)? (node._is? ' Nodesel ': ' node '): ' node ' + ' href= ' + node.url + ' ';
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;
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;
};
Adds the empty and line icons
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 = ' "alt=" "/></a>";
else str = ' ';
}
return str;
};
Checks If a node has any children and if it's the last sibling
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;
};
Returns The selected node
dTree.prototype.getSelected = function () {
var sn = this.getcookie (' cs ' + this.obj);
Return (SN)? Sn:null;
};
Highlights the selected node
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);
}
};
Toggle Open or close
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 ();
Update selected value if (this.config.objvalueid!= ')
This.update ();
};
Open or close all nodes
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 ();
};
Opens the tree to a specific node
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);
};
Closes all nodes at the same level as certain node
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]);
}
}
}
Closes all children of a node
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]);
}
}
}
Change the status of a node (open or closed)
DTree.prototype.nodeStatus = function (status, ID, bottom) {
try{
Ediv = document.getElementById (' d ' + this.obj + ID);
Ejoin = document.getElementById (' j ' + This.obj + ID);
Choose
if (This.config.checkbox) {
CBX = document.getElementById (' cbx_ ' + this.obj + ID);
Cbx.checked=status;
cbxchild= ediv.getelementsbytagname (' input ');
for (var i=0; i<cbxchild.length;i++) {
Cbxchild[i].checked=status;
}
}
Choose
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 ';
}catch (ex) {
}
};
[Cookie] Clears a cookie
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);
};
[Cookie] Sets value in a Cookie
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 ': ');
};
[Cookie] Gets a value from a cookie
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);
};
[Cookie] Returns IDs of open nodes as a string
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].value;
}
}
This.setcookie (' Co ' + this.obj, str);
};
[Cookie] Checks If a node ID is in a Cookie
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 Push and Pop is isn't implemented by the browser
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;
}
};

We can draw on a small project to try, Dtree is still good.