项目开发-dtree.js源码分析
最近项目开发中使用到了树形展示插件dtree.js，这个简单、小巧的树形结构插件，让我很惊叹：它太小了，总共代码还不到四百行，这与我以前使用的zTree相比，代码量简直是两个数量级的。而且dtree.js的界面风格我很喜欢，浅色的图标，除了能满足基本树形展示的需要，还很容易扩展（是的，它的代码很简洁），通过简单的扩展就能支持复选框、单选框等操作。
阅读dtree.js的源码，其核心就是递归处理传入的具有层级关系的数据。主要方法有四个：setCS,indent,node,addNode.记录源码阅读的理解如下：
1 Node定义
function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
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._io = open || false;//该节点是否展开
this._is = false; //该节点是否被鼠标选中
this._ls = false; //该节点是否是同级节点中的最后一个
this._hc = false; //该节点是否含有子节点
this._ai = 0; //该节点在全局数组中存储的位置下标
this._p; //该节点的父节点
}; Node是dtree.js待处理的数据的抽象iconOpen之前的属性含义很明确，好理解；最后面的几个属性的含义是在阅读完代码之后才弄清楚的。
2 dTree的类定义
// Tree object
function dTree(objName) {
this.config = {
target : null,//Node传入url时，点击打开连接的target的
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,//控制树形节点间连接线是否显示的
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false,
useRadio : false, //是否有添加单选按钮
radioName :'radioName',//默认radio的name属性：name属性一样才能实现互斥
checkedId :'', //当前所默认选中的元素
clickRadio :'' //useRadio为true时，点击事件
};
this.icon = {
};
this.obj = objName;//生成element元素的id前缀
this.aNodes = [];//存储dTree的所有节点（不包括root根）
this.aIndent = [];//全局量存入的是某个节点的缩进个数
this.root = new Node(-1);//dTree的根节点，aNodes中的元素有它的孩子，整个树才能展示
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
}; dTree类，定义了root节点的id是-1，这就意味着我们传入的第一个Node节点的pid必须是-1才能与dTree的root构成层级结构，否则dTree的树形就是空的。
3 dTree类的toString方法
toString方法生成树的内容，它本质上是利用递归生成了一个div，div的内容如下：clip的内容是与外层一样的结构，是递归生成的子节点的内容。
<div class="dtree">
<div class="dTreeNode">若干缩进
<img 节点的图标/>
<a 节点的url链接/>
节点名称
</div>
<div class="clip" 子节点的内容>
</div>
</div> toString的源码，本质上是调用addNode(this.root)生成根节点的内容。
// Outputs the tree to the page
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;
};
4 dTree类的addNode方法
addNode方法，生成某个Node的页面内容，它先生成自己的节点的内容，即<div class="dTreeNode">这个div，然后再遍历全局数组aNodes，找到它的子节点，并生成子节点的内容即：<div class="clip">，拼接成返回值，源码如下：
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;
};
5 dTree类的setCS方法
// Checks if a node has any children and if it is 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;
}; 这个方法是在检查节点是否有子节点，并且是否是同级节点中的最后一个，Node的ls只有在某个节点有同级节点，并且是所有同级节点中的最后一个时才为真。这就可以解释为什么addNode中的if(cn.ls) break;了。很明显，如果当前处理的是最后一个同级节点，那么整个树也就遍历完了嘛。但是setCS这个方法名，起的真不太好。
6 dTree类的node方法
// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
var isLeaf = false;
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;
}
isLeaf = node.icon == this.icon.node;
str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
}
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">';
//只在叶子节点前面添加Radio
if(this.config.useRadio == true&&node.pid!=-1){
if(node.id==this.config.checkedId){
str+= '<input type="radio" value="'+node.id+'" name="'+this.config.radioName+'" checked="checked" id="radio'+ this.obj + nodeId + '" onclick="javascript:'+this.config.clickRadio+'(\''+node.id+'\')"/>';
}else{
str+= '<input type="radio" value="'+node.id+'" name="'+this.config.radioName+'" id="radio'+ this.obj + nodeId + '" onclick="javascript:'+this.config.clickRadio+'(\''+node.id+'\')"/>';
}
}
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;
}; node方法，就是生成树的节点的内容，处理完成后生成了toString方法中<div class="dtree">的子元素。即class=dTreeNode的div，内容是当前节点的信息，如果它有孩子节点的话，然后拼接的是一个class="clip"的div，通过递归调用生成的 ，即最后一段：if(node._hc) str+=this.addNode(node)，以当前节点为根，生成它及它的子节点信息。
7 dTree类的indent方法
// 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 += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
if (node._hc) {
str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';
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 += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
}
return str;
}; indent就是生成当前节点的缩进内容，同时设置下一个节点的缩进个数，indent还可以理解为递归的深度，每次递归处理某个节点的indent都会push到该数组0或者1，然后在该节点处理完成后又pop一个元素，除了最后一个同级元素外，其他节点都是需要缩进1个位置的。关于缩进这部分，还需要仔细体会，不过它的作用就是生成树的错落的连接线，通过缩进，达到树形展示的效果。