技术经验分享：dTree树型组件详解

1　文件组成

图标文件，统一放在img文件夹内，包含树形节点的各种图标如文件夹、节点展开、节点关闭、根节点、链接线等。

dtree.css文件，对树型显示的文字、鼠标点击、鼠标移入移出、链接等样式进行设置。

dtree.js文件，生成树型组件，并对事件进行响应。使用步骤：

首先，应建立一个树对象（new dTree('d'))

其次，向名称为'd'的树对象中添加节点（d.addNode(id)）

最后，向浏览器输出HTML页面（doucument.write(d)，相当于隐式调用了document.write(d.toString()），toString()类似程序入口函数(与java类重写toString()类似）

2　dtree.js文件详解

2.1　树节点对象

// Node object节点对象

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

this.id = id;//该节点ID

this.pid = pid;//该节点的父节点ID

this.name = name;//该节点名称

this.url = url;//该节点的链接url

this.title = title;//鼠标移到该节点上显示的热点标题文字

this.target = target;//该节点链接打开的目标框架

this.icon = icon;//该节点关闭状态图标

this.iconOpen = iconOpen;//该节点打开状态图标

this._io = open || false;//该节点是否打开标志，默认关闭（因此时open为undefined即为false）

this._is = false;//该节点是否被选择标志

this._ls = false;//该节点是否是最后一个兄弟节点标志

this._hc = false;//该节点是否有孩子节点标志

this._ai = 0;该节点位于节点数组中的位置索引号，默认为0

this._p;//指向该节点的父节点

};

2.2　树对象

// Tree object树对象

function dTree(objName) {

this.config = {

target : null,//该节点链接所打开的目标frame(_blank, _parent, _self, _top)

folderLinks : true, //文件夹节点有超链地址,点击，true则直接打开超链而不展开节点，false则忽略超链、展开或折叠节点;

useSelection : true,// 是否高亮显示选中的节点

useCookies : true, //是否使用Cookies保存节点状态

useLines : true,//是否使用线段连接缩进

useIcons : true,//是否使用图标

useStatusText : false,//是否在状态栏显示提示文字(节点的名称)

closeSameLevel: false,//是否只展开一个同级节点

inOrder : false //如在this.aNodes【】中始终按照父节点在前子节点在后存储，设置true可直接从父节点索引位置后进行查找子节点以提高效率

}

this.icon = {

root : 'img/base.gif',

folder : 'img/folder.gif',

folderOpen : 'img/folderopen.gif',

node : 'img/page.gif',

empty : 'img/empty.gif',

//代码效果参考：http://www.jhylw.com.cn/264924569.html

join : 'img/join.gif',

joinBottom : 'img/joinbottom.gif',

plus : 'img/plus.gif',

plusBottom : 'img/plusbottom.gif',

minus : 'img/minus.gif',

minusBottom : 'img/minusbottom.gif',

nlPlus : 'img/nolines_plus.gif',

nlMinus : 'img/nolines_minus.gif'

};

this.obj = objName;//树对象名称

this.aNodes = 【】;//存储树节点数据的数组

this.aIndent = 【】;//当父节点下是最后一个兄弟节点时，push(1),否则push(0)

this.root = new Node(-1);//树的唯一根节点，ID值为-1

this.selectedNode = null;//选中节点的ID或所在this.aNode【】中的索引值this._ai

this.selectedFound = false;//有否选中的节点标志

this.completed = false;//树HTML构建完成

};

2.2.1　通过JavaScript 原型对象(prototype)为树对象（dTree）添加方法和属性

2.2.1.1　创建新节点并将其添加到树对象属性this.aNodes【 】数组中

// Adds a new node to the node array 创建一个新节点并将其添加到this.aNodes【】尾部

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

this.aNodes【this.aNodes.length】 = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

};

2.2.1.2　创建树结构并构建HTML输出到浏览器

// Outputs the tree to the page

//类似Java的类toString()重写,改变树对象的输出样式，可隐式调用

dTree.prototype.toString = function() {

var str = '\n';

if (document.getElementById) {//document.getElementById,早期一些浏览器不支持，则会返回空属性

if (this.config.useCookies) this.selectedNode = this.getSelected();//从cookies中获取节点信息

str += this.addNode(this.root);//创建树结构HTML

} else str += 'Browser not supported.';

str += '';

if (!this.selectedFound) this.selectedNode = null;//如没有找到选中的节点，将索引位置置空

this.completed = true;//输出到page的HTML构建完成标志

return str;

};

2.2.1.3　创建树结构HTML

// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

var str = '';

var n=0;　

if (this.config.inOrder) n = pNode._ai;//如this.aNodes【】节点严格按照父节点在前，子节点在后存储，则只须遍历父节点以后的部分数组数据

for (n; n[span style="color: rgba(0, 0, 255, 1)">this.aNodes.length; n++) {

if (this.aNodes【n】.pid == pNode.id) {//遍历this.aNodes【】，仅处理pNode的子节点

var cn = this.aNodes【n】;//临时变量，将pNode子节点存储起来

cn._p = pNode;//设置子节点指向父节点pNode

cn._ai = n;//设置子节点在this.aNodes【】中索引值

this.setCS(cn);//检查子节点是否还有子节点，是否是最后一个兄弟节点，并设置this.ls,this._hc

if (!cn.target && this.config.target) cn.target = this.config.target;//设置目标Frame

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);//创建节点的图标、url和文本的HTML,【在this.node(cn,n)中又调用this.addNode(node)，递归结束是节点没有孩子节点】

if (cn._ls) break;//如已找到pNode节点下最后一个子节点，则结束遍历

}

}

return str;

};

2.2.1.4　创建树节点的图标、url和文本的HTML

// Creates the node icon, url and text创建节点的图标、url和文本HTML

dTree.prototype.node = function(node, nodeId) {

var str = '' + this.indent(node, nodeId);

if (this.config.useIcons) {//配置选择节点使用图标

if (!node.icon) {//设置节点关闭时图标：是根节点设置为root，是有孩子的节点设置为folder,是没孩子节点设置为node(page.gif)

　　　　　　　node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);

　　　　　}

if (!node.iconOpen) {//设置节点展开时的图标：有孩子节点设置为folderopen,无孩子节点设置为node

　　　　　　　node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

　　　　　}

if (this.root.id == node.pid) {//是根节点单独处理，开闭图标均设置为root

node.icon = this.icon.root;

node.iconOpen = this.icon.root;

}

　　　　　//1. 构建icon图标即标签：

　　　　　//id="i+对象名+传入节点在this.aNodes【】的位置索引号nodeId"(能确保唯一)

　　　　　//根据node._io标志，设置图标引入

str += '';

}

if (node.url) {//配置节点使用url：

　　　　　//2.构建url即标签：

　　　　　//id="s+对象名+传入节点在this.aNodes【】的位置索引号nodeId(能确保唯一)，

　　　　　//根据useSelection与node._is标志设置class="nodeSel"或"node"

　　　　　//根据node.url设置href链接地址

str += '';

} else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)//不允许使用url，配置节点响应鼠标事件

str += '';//鼠标单机调用this.o(nodeId)

str += node.name;//配置节点名称为节点显示文字

if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '';

str += '';

if (node._hc) {//节点存在孩子，递归创建孩子节点的图标、url和文本的HTML

str += '