dtree 网页树状菜单及传递对象集合到js内，动态生成节点

答案：在winform端，树状菜单是非常有用的，实现这个是非常便捷的，所以我想到在页面放入一个树状菜单的。我选择了dtree这个工具，网络上还有很多方法实现页面树状菜单的，不过我觉得这个比较好用的，而且配置比较简单，运用上上手很快。dtree是纯js的，所以不用导入jar包，并且配置只要在js内配置就好了。而且现在网络上有很多高手修改后的改良版，加了checkbox，更加方便。在开发过程中，最难的就是数据的交互的，因为dtree是纯js的，所以不存在和后台交互的方法，我的办法是先通过后台交互，将数据传递到页面，然后再传递到js内。后台传递到页面的数据我拼接成一个字符串，然后在js内切割，将数据整合成数组。 
后台数据处理代码： 
复制代码 代码如下:
 
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; 
} 
 
我是用s2sh款家的，所以数据存放到session中方式是 
ActionContext.getContext().getSession().put(key, value) 
然后页面得到数据： 
复制代码 代码如下:
 
<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 是我自己编写的一个js文件内的方法。 
js： 
复制代码 代码如下:
 
Codefunction treeload(linkmans , dires){ 
var linklist= String2linklist(linkmans); 
var direslist = String2direlist(dires); 
d = new dTree('d','./'); 
d.config.checkbox=true;//显示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,'联系人',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,'全部联系人',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; 
} 
 
最后，效果图 

                               
我改写的dtree 的js： 
复制代码 代码如下:
 
// Node object 
function Node(id, pid, name, checked, value, icon ,url, title, target, iconOpen, open) { 
this.id = id; 
this.pid = pid; 
this.name = name; 
//是否在该节点添加复选框并设置选中状态，true:选中，false:不选中，null:不添加 
this.checked = checked==null?null:(checked || false); 

this.value = value;//增加value属性，选中复选框，输入框内得到的就是这个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) { 
//路径 
this.path = path ||''; 
//加载css文件 
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, 
//是否显示复选框，true显示，false不显示 
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; 
}; 
//设置选中节点 
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<v

上一个：xScrollStick 跟随滚动条漂浮的JS特效
下一个：JavaScript中的null和undefined解析