dtree的使用和扩展

相信用过dtree的童靴的不在少数，网络上流传的JS树有很多，例如雪花树MzTreeView,EXT、Struts2出来之后，也有自己的树控件，但是这么多风姿卓约的倩影中，我独爱，独爱dtree那一棵。原因有二:1.简单易用，能满足基本需要 2.代码简单，扩展起来也很容易。 这就像找MM一样，简单单纯傻傻的MM好，那些复杂要猜心的就让她靠边吧，不能把握的再美再好咋都不要，哈哈，扯远了。
言归正传，先介绍dtree的基本使用。第一步，引用dtree的资源，在你的页面文件head标签中引用dtree的js文件和css样式文件。例如我的代码如下，路径视你存放dtree资源的具体情况而定:

<link href="/css/dtree.css" rel="stylesheet" type="text/css" /> 

<script src="/js/dtree.js" type="text/javascript"></script>

第二步，定义和展示树。dtree通常可放在一个div中，在你的页面文件中要显示树的地方，添加下列代码:

<div class="dtree" > 
<script type="text/javascript">

/* 1. 定义一个树对象 */ 
var d = new dTree('d'); // 隐含创建一个根节点,id等于-1，不可见

/* 2. 添加一级节点 */ 
d.add("0","-1","所有类别"); //这里-1是前面根节点的id，说明是新增的节点是d的直接子节点

/* 循环添加其他节点 */ 
/* 3. 参数说明:1.ID 2.父ID 3.名称 4.URL 5.热点提示 6.URL显示目标target 7.节点关闭时图标 8.节点打开时图标 9.判断节点是否打开 */ 

<c:forEach items="${userLogSortList}" var="treeNode">

d.add( "${treeNode.sortId}","${treeNode.parentId}","${treeNode.sortName}", "${treeNode.url}","${treeNode.sortName}","logList");

</c:forEach> 

/* 4.写的div中展示 */ 
document.write(d);

</script>
</div> 

对前面代码，简单说明:其中注释里1到3步是对树各节点的定义，注释4是把树最终展示到页面，其中1到3步的代码中用到EL循环和表达式，EL是什么就不要我解释了吧？！如果你不想使用dtree默认的节点关闭和打开的图标，你也可以在add函数的第7个和第8个参数中填上你自己中意的图标路径。

怎么样，很简单吧，当然，树的数据需要你在后台准备好，这对那种树控件都是逃避不了的工作。 但在实际使用中，dtree会有不足，在有些应用场景不能满足我们的需求，所以有必要对dtree进行扩展，这就好比为了爱，我们会不断使自己进步，让自己变得更优秀，尽力把最美好的一面展示给对方，我想dtree如果有灵性，她也希望如此的，呵呵。但是在向完美靠近的过程中，需要根据自身实际情况采取合适的方法，否则适得其反，所以我们有必要先了解dtree，打开你的dtree.js文件吧，让我们感受感受dtree的内心，就像感受和情人之间的心灵默契，有些东西语言是多余的。
dtree.js中最主要有下面几个函数：
1.节点定义函数：function Node(id, pid, name, url, title, target, icon, iconOpen, open)
其中函数中_is属性表示是否被选择，_ls属性表示是否为最后一个兄弟节点，_hc表示是否有子节点，_p指向父节点.

2.树对象定义函数：function dTree(objName) :
该函数完成后述功能：a.定义树全局配置信息 b.定义树默认图标 c.创建树对象和根节点，创建根节点时会调用函数1.

3.节点添加函数：dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) 实际是调用函数1定义节点属性，同时把节点增加到树对象的aNodes节点数组中

4.dTree.prototype.node = function(node, nodeId) 
根据定义构建节点的图标、url(关联展开和关闭函数到非末节点)以及显示文本。

5.dTree.prototype.addNode = function(pNode) 
根据定义构建树首次展示的结构模型，会调用函数4

6.dTree.prototype.toString = function() 
调用函数4、5，串化dtree展示到页面div中。

以上函数1到3在前面代码中定义的步骤时会调用，函数4到5在前面代码中展示树的步骤会调用，这是最重要的几个函数了，
是dtree的思想精华所在了，呵呵，其他的是事件触发函数。学习prototype的童靴也可以用dtree.js作为学习的入门课本，不错的。

了解了dtree的内心，我们再来说说扩展，我这里的第一个需求是为dtree增加checkbox按钮，我想这个是很多童靴都想要的吧，网上已经有很多这样的例子，我也就借花献佛了、抛金引玉了。

步骤1，把函数1头修改为function Node(id, pid, name, url, title, target, icon, iconOpen, open,checked,isBottom) ，在函数体增加下列代码:

this.checked=checked; 
this.isBottom=isBottom;

 

步骤2，在函数2的函数体的config信息中增加下列代码：

check: false , 
useAllData: false 

 

其中useAllData这个属性及相关代码可能不是你想要的，但这里我一起给列出来了。

步骤3，函数3的函数体修改后如下：

var node = new Node(id, pid, name, url, title, target, icon, iconOpen, open, checked,isBottom);

this.aNodes[this.aNodes.length] = node;
var n;
var len = this.aNodes.length; 
if ( node.checked ){ 
var pid = node.pid; 
var bSearch; 
do{ 
bSearch = false; 
for( n = 0; n < len; n++){ 
if ( this.aNodes[n].id == pid){ 
if (this.aNodes[n].checked == false){
this.aNodes[n].checked=true; 
pid = this.aNodes[n].pid; 
bSearch= true; 
break;
} 
} 
} 
}while(bSearch==true);
}

 

后面两重循环的作用是，当一个节点被勾选时候，改变其父辈祖宗节点的选择状态定义。

步骤4，在函数4中创建图标的代码段中增加下列代码，该代码的作用是用来构建节点checkbox的图标以及为节点关联checkbox勾选触发函数：

if(this.config.check == true){ 
if(node.checked ==true){ 
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" ';
if (this.config.useAllData) { str+= ' name="dataId" '; }
if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; }
str+= ' onclick="javascript:'+this.obj+'.cc('+nodeId+')" checked />';
}else{
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" ';
if (this.config.useAllData) { str+= ' name="dataId" '; }
if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; }
str+= ' onclick="javascript:'+this.obj+'.cc('+nodeId+')" />';
} 
}

 

步骤5，增加一个新的函数，就是步骤4的cc函数，作用是单节点checkbox勾选状态改变时，改变相应祖宗节点和子孙节点checkbox的状态，如下：

dTree.prototype.cc=function(nodeId){ 
var cs = document.getElementById("c"+this.obj+nodeId).checked; 
var n,node = this.aNodes[nodeId]; 
var len =this.aNodes.length;

for (n=0; n<len; n++) {

if (this.aNodes[n].pid == node.id) { 
document.getElementById("c"+this.obj+n).checked=cs; 
this.cc(n); 
}
}
if (cs ==f alse){ 
var clicknode=node 
do{
for( j=0; j<l en; j++){ 
if(this.aNodes[j].pid==clicknode.pid&&document.getElementById ("c"+this.obj+j).checked==true){ 
return; 
}
}
if ( j == len) { 
for(k=0;k<len;k++){ 
if (this.aNodes[k].id == clicknode.pid ){ 
document.getElementById("c"+this.obj+k).checked=false; 
clicknode=this.aNodes[k]; 
break; 
} 
} 
}

}while(clicknode.pid!=-1);

}
if(cs==true){ 
var pid=node.pid; 
var bSearch; 
do{ 
bSearch=false; 
for(n=0;n<len;n++){ 
if (this.aNodes[n].id == pid ){ 
document.getElementById("c"+this.obj+n).checked = true; 
pid = this.aNodes[n].pid; 
bSearch = true; 
break; 
} 
} 
}while(bSearch==true);
}

}

 

稍微麻烦点，但是看到checkbox出来时，我想你会有成就感，就象历尽艰辛情路追到你心仪女孩后时内心的雀跃。

最后讲讲扩展的第二个需求，为末级节点增加外部js函数调用，外部js函数是留给童靴们在使用时去实现的，这样子，童靴们可以在这个外包js函数去定制和树有关的其他业务动作，甚至是异步调用，实现ajax的无刷新效果。具体扩展方法是，在函数4中判断url的代码中再增加一个分支，代码如下：

else if ((!this.config.folderLinks || !node.url) && !node._hc && node.pid != this.root.id){
str += '<a href="javascript: ' + this.obj + 'treeNodeClick(' + node.id + ');" class="node">';
}