dtree树形菜单

dtree.js

// Node object
function text2Html_View(strText)
{
	if(strText==undefined)
	{
		return '';
	}
	
	strText	=strText.replace(/&/g,"&");
	strText	=strText.replace(/>/g,">");
	strText	=strText.replace(/</g,"&lt;");

	return strText;
}
function html_View2Text(strText)
{
	if(strText==undefined)
	{
		return '';
	}
	
	strText = strText.replace(/&lt;/g,"<");
	strText = strText.replace(/&gt;/g,">");
	strText = strText.replace(/&amp;/g,"&");

	return strText;
}
function Node(id, pid, name, value, url, title, target, icon, iconOpen, open, isChecked, isType, isDisabled) {
	name=text2Html_View(name);	
	this.id = id;
	this.pid = pid;
	this.name = name;
	this.url = url || null;
	this.title = title || null;
	this.target = target || null;
	this.icon = icon || null;
	this.iconOpen = iconOpen || null;
	this._io = open || false;
	this._is = false;	// 是否展开
	this._ls = false;	// 在兄弟中是否为最后一个
	this._hc = false;	// 是否有子节点
	this._ai = 0;		// 绝对id编号
	this._p;			// 存储父节点对象
	
	this.isChecked = isChecked || false;	// 节点是否被用户选中
	this.isType = isType || false;			// 节点是否为类型
	this.isDisabled = isDisabled || false;	// 节点控件是否不可以被操作
	this.value = value;				// 保存节点的实际值，如数据库id
};

// Tree object
function dTree(objName,contextPath) {
	this.config = {
		target					: null,
		folderLinks				: true,				   // 选择节点的同时是否收缩展开或收缩节点, 文件夹是否带连接，当带链接时点击不会收缩或展开子节点
		useSelection			: true,				   // 选择某个节点是是否高亮显示
		useCookies				: false,
		useLines				: true,
		useIcons				: true,
		useStatusText			: false,               //状态条显示Name值，如果Name中有特殊字符报错。               
		closeSameLevel			: false,               //当点开同级其它节点，会关闭同级其它展开的节点。为True时只能查看某级下一个节点子目录。
		inOrder					: false,               //当父节点总是加载在子节点前，设置为true可以加快树的生成速度，保险方式是保持默认false。
		
		useControl				: false,					// 是否使用选择控件 
		controlType				: 'checkbox',				// 选择控件的类型input控件的type类型列表默认为checkbox
		isRootUseControl		: false,					// 根节点是否使用控件 
		isDisplay				: true,						// 树是否显示，默认为显示
		typeIdArrayName			: 'typeIdArray',		// 封装类型选择id列表变量名
		nodeIdArrayName			: 'nodeIdArray',		// 封装普通节点选择id列表变量名
		cssLink 				: '<link href=/yourContextPath/usergroup/css/dtree.css type=text/css rel=StyleSheet>',	// dTree所使用的css文件
		strSplitNameSeparator	: ';',					// 用户选择的结点名称的分割符号
		strSplitIdSeparator		: ',',					// 用户选择的database id列的分割符号
		//如果设置正向或反向级联，一定要检查setSSS(id,isChecked) 是否定义，参看文档末尾函数
		isCorrelateSelect		: false,				// 正向、向下级联选 如果控件的类型为checkbox，当选中类型时是否级联选择其下类型及节点，默认为false 不级联选择
		isReverseCorrelateSelect		: false,			// 反向、向上级联选 如果控件的类型为checkbox，当选中类型或节点时是否级联选择其上类型直至根，默认为false 不向上级级联选择
		isSingleCorrelateLayer			: false,			// 是否为单层级联选择。既只选择该类型下一级的类型及节点。默认为false无穷级级联选择
		isSingleReverseCorrelateLayer	: false,			// 反向、向上级联选时，是否为单层级联选择。既只选择该类型或节点的上一级的类型。默认为false无穷级级联选择直至根节点
		correlateSelectType				: 'all',			// 当选中类型节点时级联选择的类型。默认为all类型和节点一起选择。type只选择类型。node只选择节点。
		isEventOnOk						: false,			// 用户选择确定后是否触发事件
		isLockDisabledNodeChecked		: false,				// 锁定被设置为isDisabled==true结点控件的isChecked选择状态。false不锁定。true锁定。默认为false
        isDelayBuild					: false	            //延迟加载
	}
	this.icon = {
		root				: '/yourContextPath/usergroup/images/dtree/root.gif',
		folder			: '/yourContextPath/usergroup/images/dtree/folder.gif',
		folderOpen	: '/yourContextPath/usergroup/images/dtree/folderopen.gif',
		node				: '/yourContextPath/usergroup/images/dtree/page.gif',
		empty				: '/yourContextPath/usergroup/images/dtree/empty.gif',
		line				: '/yourContextPath/usergroup/images/dtree/line.gif',
		join				: '/yourContextPath/usergroup/images/dtree/join.gif',
		joinBottom	: '/yourContextPath/usergroup/images/dtree/joinbottom.gif',
		plus				: '/yourContextPath/usergroup/images/dtree/plus.gif',
		plusBottom	: '/yourContextPath/usergroup/images/dtree/plusbottom.gif',
		minus				: '/yourContextPath/usergroup/images/dtree/minus.gif',
		minusBottom	: '/yourContextPath/usergroup/images/dtree/minusbottom.gif',
		nlPlus			: '/yourContextPath/usergroup/images/dtree/nolines_plus.gif',
		nlMinus			: '/yourContextPath/usergroup/images/dtree/nolines_minus.gif'
	};
	this.obj = objName;
	this.aNodes = [];
	this.aIndent = [];
	this.root = new Node(-1);
	this.selectedNode = null;
	this.selectedFound = false;
	this.completed = false;
	
	if(contextPath != undefined && contextPath != null){
		this.config.cssLink = replaceAll(this.config.cssLink,"/yourContextPath",contextPath);
		this.icon.empty =  replaceAll(this.icon.empty,"/yourContextPath",contextPath);
		this.icon.folder = replaceAll(this.icon.folder,"/yourContextPath",contextPath);
		this.icon.folderOpen =  replaceAll(this.icon.folderOpen,"/yourContextPath",contextPath);
		this.icon.join = replaceAll(this.icon.join,"/yourContextPath",contextPath);
		this.icon.joinBottom = replaceAll(this.icon.joinBottom,"/yourContextPath",contextPath);
		this.icon.line = replaceAll(this.icon.line,"/yourContextPath",contextPath);
		this.icon.minus = replaceAll(this.icon.minus,"/yourContextPath",contextPath);
		this.icon.minusBottom = replaceAll(this.icon.minusBottom,"/yourContextPath",contextPath);
		this.icon.nlMinus = replaceAll(this.icon.nlMinus,"/yourContextPath",contextPath);
		this.icon.nlPlus = replaceAll(this.icon.nlPlus,"/yourContextPath",contextPath);
		this.icon.node = replaceAll(this.icon.node,"/yourContextPath",contextPath);
		this.icon.plus = replaceAll(this.icon.plus,"/yourContextPath",contextPath);
		this.icon.plusBottom = replaceAll(this.icon.plusBottom,"/yourContextPath",contextPath);
		this.icon.root = replaceAll(this.icon.root,"/yourContextPath",contextPath);
		this.icon.nlMinus=replaceAll(this.icon.nlMinus,"/yourContextPath",contextPath);
	}
	
};

dTree.prototype.initTreeContextPath = function(contextPath) {
	
	this.config.cssLink = replaceAll(this.config.cssLink,"/yourContextPath",contextPath);
	this.icon.empty =  replaceAll(this.icon.empty,"/yourContextPath",contextPath);
	this.icon.folder = replaceAll(this.icon.folder,"/yourContextPath",contextPath);
	this.icon.folderOpen =  replaceAll(this.icon.folderOpen,"/yourContextPath",contextPath);
	this.icon.join = replaceAll(this.icon.join,"/yourContextPath",contextPath);
	this.icon.joinBottom = replaceAll(this.icon.joinBottom,"/yourContextPath",contextPath);
	this.icon.line = replaceAll(this.icon.line,"/yourContextPath",contextPath);
	this.icon.minus = replaceAll(this.icon.minus,"/yourContextPath",contextPath);
	this.icon.minusBottom = replaceAll(this.icon.minusBottom,"/yourContextPath",contextPath);
	this.icon.nlMinus = replaceAll(this.icon.nlMinus,"/yourContextPath",contextPath);
	this.icon.nlPlus = replaceAll(this.icon.nlPlus,"/yourContextPath",contextPath);
	this.icon.node = replaceAll(this.icon.node,"/yourContextPath",contextPath);
	this.icon.plus = replaceAll(this.icon.plus,"/yourContextPath",contextPath);
	this.icon.plusBottom = replaceAll(this.icon.plusBottom,"/yourContextPath",contextPath);
	this.icon.root = replaceAll(this.icon.root,"/yourContextPath",contextPath);
	this.icon.nlMinus=replaceAll(this.icon.nlMinus,"/yourContextPath",contextPath);
	
};



// Adds a new node to the node array
dTree.prototype.add = function(id, pid, name, isType, isChecked, isDisabled, url, title, target, icon, iconOpen, open) {
	
	// 转换字符型为boolean型，便于统一，也防止jsp程序输出到页面为''产生js脚本错误
	if(isChecked=='true' || isChecked==true)
	{
		isChecked = true;
	}
	else
	{
		isChecked = false;
	}
	
	if(isType=='true' || isType==true)
	{
		isType = true;
	}
	else
	{
		isType = false;
	}
	
	if(isDisabled=='true' || isDisabled==true)
	{
		isDisabled = true;
	}
	else
	{
		isDisabled = false;
	}
	
	var valueTemp = id;
	
	// 为id,pid添加特制字头
	if(isType==true)
	{
		id = 't' + id;
		if((pid!='-1') && (pid!=-1))
		{
			pid = 't' + pid;
		}
	}
	else
	{
		id = 'n' + id;
		if((pid!='-1') && (pid!=-1))
		{
			pid = 't' + pid;
		}
	}
	
	this.aNodes[this.aNodes.length] = new Node(id, pid, name, valueTemp, url, title, target, icon, iconOpen, open, isChecked, isType, isDisabled);
  
};

// Open/close all nodes
dTree.prototype.openAll = function() {
	this.oAll(true);
};
dTree.prototype.closeAll = function() {
	this.oAll(false);
};

// 生成树html
dTree.prototype.toString = function() {
	// shield useCookies
	this.config.useCookies = false;
	
	var str = '<div class="dtree" style="padding:3px;" ';
	if(this.config.isDisplay==false)
	{
		str += 'style="display:none"';
	}
	str += '>\n';
	if (document.getElementById) {
		if (this.config.useCookies) this.selectedNode = this.getSelected();
		str += this.addNode(this.root);
		//alert(str);
	} else str += 'Browser not supported.';
	str += '</div>';
	if (!this.selectedFound) this.selectedNode = null;
	this.completed = true;
	return str;
};


// Creates the tree structure
// 添加pNode下所有子节点结构。（一层）
dTree.prototype.addNode = function(pNode) {
	var str = '';
	var n=0;
	if (this.config.inOrder) n = pNode._ai;
	var sss=new StringBuffer('');
	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);
			sss.append(this.node(cn, n));
			if (cn._ls){str=sss.toString(); break;}
		}
	}
	return str;
};

function StringBuffer(){this.b=[];}
StringBuffer.prototype.append=function(a)
{
	//this.b.push(a);
	this.b[this.b.length]=a;
}
StringBuffer.prototype.toString=function(){return this.b.join("");}
StringBuffer.prototype.clear=function(){var count=this.b.length;for(var i=count;i>0;i--){this.b.pop();}}
var strBuf={
b:[],
append:function(a)
{
	//this.b.push(a);
	this.b[this.b.length]=a;
},
toString:function(){return this.b.join("");},
clear:function(){for(var i=this.b.length;i>0;i--){this.b.pop();}}
};

// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
	var str=new StringBuffer('');
	str.append('<div class="dTreeNode">');
	str.append(this.indent(node, nodeId));
	//var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
	// 判断是否使用控件
	if(this.config.useControl==true)
	{
		if(this.root.id!=node.pid || this.config.isRootUseControl==true)
		{// 不为根节点或设置了根节点使用控件生成控件
			// 使用控件，生成html代码
			//str += '<input id="ctrl' + this.obj + nodeId + '" name="';
			str.append('<input id="ctrl');
			str.append(this.obj);
			str.append(nodeId);
			str.append('" name="');
			
			// 根据类型生成控件名称
			if(node.isType==true)
			{
				//str += this.config.typeIdArrayName;
				str.append(this.config.typeIdArrayName);
			}
			else
			{
				//str += this.config.nodeIdArrayName;
				str.append(this.config.nodeIdArrayName);
			}
			
			//str += '" type="' + this.config.controlType + '" value="' + node.value + '" ';
			str.append('" type="');
			str.append(this.config.controlType);
			str.append('" value="');
			str.append(node.value);
			str.append('" ');
			
			// 根据操作表示设置控件可操作状态
			if(node.isDisabled==true)
			{// 控件不可见
				//str += ' style="display:none" ';
				str.append(' style="display:none" ');
			}
	
			// 判断是否为checkbox 或 radio
		    
			if(this.config.controlType=='checkbox' || this.config.controlType=='radio')
			{
				//str += ' style="width:15px; height:15px" ';
				str.append(' style="width:15px; height:15px" ');
				
				// 是选择类型控件根据节点的选择状态设置控件状态
				if(node.isChecked==true)
				{
					//str += ' checked="checked" ';
					str.append(' checked="checked" ');
				}
				
				// 用户改变页面控件选择状态时同时改变相应节点选择状态
				if(node.isDisabled==false)
				{
					
					//str += ' onClick="javascript: try{setSSS(this.id,this.checked);}catch(e){}' + this.obj + '.setChecked(' + nodeId + ', this.checked);" ';
					str.append(' onClick="javascript: try{setSSS(this.id,this.checked);}catch(e){}');
					str.append(this.obj);
					str.append('.setChecked(');
					str.append(nodeId);
					str.append(', this.checked);" ');
				}
			}
			//str += ' />';
			str.append(' />');
		}
	}
	
	if (this.config.useIcons) {
		if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc || node.isType) ? this.icon.folder : this.icon.node);
		if (!node.iconOpen) node.iconOpen = (node._hc || node.isType) ? this.icon.folderOpen : this.icon.node;
		if (this.root.id == node.pid) {
			node.icon = this.icon.root;
			node.iconOpen = this.icon.root;
		}
		//str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" align="absmiddle" /> ';
		str.append('<img id="i');
		str.append(this.obj);
		str.append(nodeId);
		str.append('" src="');
		str.append(((node._io) ? node.iconOpen : node.icon));
		str.append('" align="absmiddle" /> ');
	}
	if (node.url) {
		//str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
		str.append('<a id="s');
		str.append(this.obj);
		str.append(nodeId);
		str.append('" class="');
		str.append(((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node'));
		str.append('" href="');
		str.append(node.url);
		str.append('"');
		if (node.title) {str.append(' title="');str.append(node.title);str.append('"');}//str += ' title="' + node.title + '"';
		if (node.target) {str.append(' target="');str.append(node.target);str.append('"');}//str += ' target="' + node.target + '"';
		if (this.config.useStatusText) 
		{
			str.append(' οnmοuseοver="window.status=\'');
			str.append(node.name);
			str.append('\';return true;" οnmοuseοut="window.status=\'\';return true;" ');
		}
		//str += ' οnmοuseοver="window.status=\'' + node.name + '\';return true;" οnmοuseοut="window.status=\'\';return true;" ';
		if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
		{
			str.append(' οnclick="javascript: ');
			str.append(this.obj);
			str.append('.s(');
			str.append(nodeId);
			str.append(');"');
		}
			//str += ' οnclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
		//str += '>';
		str.append('>');
	}
	else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
	{
		//str += '<a style="cursor:hand" onClick="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
		str.append('<a style="cursor:hand;text-decoration:none;color:black" onClick="javascript: ');
		str.append(this.obj);
		str.append('.o('); 
		str.append(nodeId); 
		str.append(');" class="node">');
	}
	
	//str += node.name;
	str.append(node.name);
	
	if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str.append('</a>');//str += '</a>';
	//str += '</div>';
	str.append('</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.append('<div id="d');
		str.append(this.obj);
		str.append(nodeId);
		str.append('" class="clip" style="display:');
		str.append(((this.root.id == node.pid || node._io) ? 'block' : 'none'));
		str.append(';">');
		if(this.config.isDelayBuild==undefined || this.config.isDelayBuild==false || (this.config.isDelayBuild==true && node._p.id==this.root.id))
		{
			//str += this.addNode(node);
			str.append(this.addNode(node));
		}	
		//str += '</div>';
		str.append('</div>');
	}
	this.aIndent.pop();
	return str.toString();
};

// Adds the empty and line icons
dTree.prototype.indent = function(node, nodeId) {
	var str = new StringBuffer('');;
	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 ) + '" align="absmiddle" />';
			str.append('<img src="');
			str.append(( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ));
			str.append('" align="absmiddle" />');
		}	
		(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
		if (node._hc) {
			str.append('<img id="j');
			str.append(this.obj);
			str.append(nodeId);
			str.append('" style="CURSOR:hand" onClick="javascript: ');
			str.append(this.obj);
			str.append('.o(');
			str.append(nodeId);
			str.append(');" src="');
			//str += '<img id="j' + this.obj + nodeId + '" style="CURSOR:hand" onClick="javascript: ' + this.obj + '.o(' + nodeId + ');" src="';
			if (!this.config.useLines) str.append((node._io) ? this.icon.nlMinus : this.icon.nlPlus);//str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
			else str.append(( (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 += ( (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 += '" align="absmiddle" />';
			str.append('" align="absmiddle" />');
		} else 
		  {
		  	str.append('<img src="');
		  	str.append(( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty));
		  	str.append('" align="absmiddle" />');
		  }
			//str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" align="absmiddle" />';
	}
	return str.toString();
};

// 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;
};

// 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];
	
	if(this.config.isDelayBuild==true && cn._io==false)
	{
		var childrenDIV = document.getElementById('d' + this.obj + id);
		if(childrenDIV!=null && childrenDIV.innerHTML=="")
		{
			var nodeTemp = cn;
			var indentArray = new Array();
			while(nodeTemp._p.id!=this.root.id)
			{
				indentArray[indentArray.length] = (nodeTemp._ls) ? 0 : 1;
				nodeTemp = nodeTemp._p;
			}
			
			for(var i = indentArray.length - 1; i>=0; i--)
			{
				this.aIndent.push(indentArray[i]);
			}
			
			
			childrenDIV.innerHTML = this.addNode(cn);
			
			
			for(var i = 0; i < indentArray.length; i++)
			{
				this.aIndent.pop();
			}
		}
	}
	
	
	this.nodeStatus(!cn._io, id, cn._ls);
	cn._io = !cn._io;
	if (this.config.closeSameLevel) this.closeLevel(cn);
	if (this.config.useCookies) this.updateCookie();
	
	var lId=cn.id;
	/*for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n]._hc && this.aNodes[n].pid == lId) {
			this.o(this.aNodes[n]._ai);			
		}
	}*/
};

dTree.prototype.oSelect = function(id) {
	var cn = this.aNodes[id];
	
	if(this.config.isDelayBuild==true && cn._io==false)
	{
		var childrenDIV = document.getElementById('d' + this.obj + id);
		if(childrenDIV!=null && childrenDIV.innerHTML=="")
		{
			var nodeTemp = cn;
			var indentArray = new Array();
			while(nodeTemp._p.id!=this.root.id)
			{
				indentArray[indentArray.length] = (nodeTemp._ls) ? 0 : 1;
				nodeTemp = nodeTemp._p;
			}
			
			for(var i = indentArray.length - 1; i>=0; i--)
			{
				this.aIndent.push(indentArray[i]);
			}
			
			
			childrenDIV.innerHTML = this.addNode(cn);
			
	
			for(var i = 0; i < indentArray.length; i++)
			{
				this.aIndent.pop();
			}
		}
	}
	
	
	this.nodeStatus(!cn._io, id, cn._ls);
	cn._io = !cn._io;
	if (this.config.closeSameLevel) this.closeLevel(cn);
	if (this.config.useCookies) this.updateCookie();
	
	var lId=cn.id;
	for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n]._hc && this.aNodes[n].pid == lId) {
			this.oSelect(this.aNodes[n]._ai);			
		}
	}
};

// 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);
};

// Opens the tree to a specific node by logic id
dTree.prototype.openToAndHighlightSelectedNode = function(nId, isType, bSelect) {
	for(var i = 0; i < this.aNodes.length; i++)
	{
		if(this.aNodes[i].value==nId && this.aNodes[i].isType==isType)
		{
			break;
		}
	}
	if(i < this.aNodes.length)
	{
		this.openTo(this.aNodes[i]._ai, bSelect, true);
	}
};

// Closes all nodes on 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) {
	eDiv	= document.getElementById('d' + this.obj + id);
	eJoin	= document.getElementById('j' + this.obj + id);
	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';
};


// [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].id;
		}
	}
	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 not 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;
	}
};


dTree.prototype.setTreeNodeChecked = function(id, checked)
{
		this.aNodes[id].isChecked = checked;
		var elementTemp = document.getElementById('ctrl' + this.obj + id);
		
		if(elementTemp!=null)
		{
			elementTemp.checked = checked;
		}
};


// 以数组中id绝对号的节点为根，如果是类型节点深度优先，如果是节点广度优先。级联选择类型及节点
dTree.prototype.setCorrelateSelect = function(id, checked)
{
	// 设置当前类型节点选择状态
	this.setTreeNodeChecked(id, checked);
	
	// 级联选择其下类型及节点选择状态 
	for(var i=0; i < this.aNodes.length; i++)
	{// 循环级联选择类型及节点
		if(this.aNodes[i].pid==this.aNodes[id].id)
		{// 循环当前节点为根节点下一级子类型或节点
			if(this.aNodes[i].isType==false)
			{// 是节点
				if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='node')
				{
					this.setTreeNodeChecked(this.aNodes[i]._ai, checked);
				}
			}
			else
			{   // 类型节点
			    // 判断级联层次
				if(this.config.isSingleCorrelateLayer==false)
				{// 无穷级联选择
					this.setCorrelateSelect(this.aNodes[i]._ai, checked);
				}
				else
				{// 一层
					if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='type')
					{
						this.setTreeNodeChecked(this.aNodes[i]._ai, checked);
					}
				}
			}
		}
	}
};

// get lId(its parentId = 0) from the tree for a specific node
dTree.prototype.getBranchRootId = function(nId, isType) {
 for(var i = 0; i < this.aNodes.length; i++)
 {
  if(this.aNodes[i].value==nId && this.aNodes[i].isType==isType)
  {
   break;
  }
 } 
   
 if(i < this.aNodes.length)
 { 
  return this.getParentRootId(this.aNodes[i]._ai, true);
 } 
};

dTree.prototype.getParentRootId = function(nId, 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._p._ai == 0)
 {
  return cn.value; 
 } 
 else if(!cn._p) 
  return -1; 
 else  
  return this.getParentRootId(cn._p._ai, true); 
};

// 根据数组中id，设置节点当前选择状态
dTree.prototype.setChecked = function(id, checked)
{
	// 控件为radio类型,清除所有节点控件选择状态
	if(this.config.controlType=='radio')
	{
		for(var i=0; i < this.aNodes.length; i++)
		{
				this.aNodes[i].isChecked = false;
		}
		
		this.setTreeNodeChecked(id, checked);
	}
	else
	{// 为checkbox控件
		// 判断是否使用级联选择
		if(this.config.isCorrelateSelect==true)
		{// 级联选择
			if(this.aNodes[id].isType==true)
			{
				this.setCorrelateSelect(id, checked);
			}
			else
			{
				this.setTreeNodeChecked(id, checked);
			}
		}
		else
		{
			this.setTreeNodeChecked(id, checked);
		}
		
			// 判断当前节点是否是选中状态，只有选中才进行反向级联选
		if(checked==true)
		{
			// 判断是否使用反向级联选
			if(this.config.isReverseCorrelateSelect==true)
			{// 反向级联选
				// 得到当前类型或节点的父亲节点对象，初始化
				var parentNodeTemp = this.aNodes[id]._p;
				
				while(parentNodeTemp.pid!=undefined)
				{// 非根节点选中该类型节点
					if(parentNodeTemp.pid!=-1 || this.config.isRootUseControl==true)
					{
						this.setTreeNodeChecked(parentNodeTemp._ai, true);
					}
					
					parentNodeTemp = parentNodeTemp._p;
				}
			}
		}
	}
		
};

// 根据控件id值设置选择状态
dTree.prototype.setCheckedCtrlId = function(id, checked) 
{
	var str = '';
	
	for(var i=0; i<id.length; i++)
	{
		var char1 = id.substr(i, 1);
		
		if(char1=='0' || char1=='1' || char1=='2' || char1=='3' || char1=='4' || char1=='5' || char1=='6' || char1=='7' || char1=='8' || char1=='9')
		{
			str += char1;
		}
	}
	
	if(str!='')
	{
		this.aNodes[str].isChecked = checked;
	}
};

function showModalDialogTree(tree, inputCtrlId, contextPath)
{
    
    var array = new Array(3);
    array[0] = tree;
    array[1] = inputCtrlId;
    array[2] = window;
	
	if(contextPath==null || contextPath.length==0){
		contextPath = '/yourContextPath';
		alert("Error,required three params,third param is contextPath!");
	}
     
	window.showModalDialog(contextPath+"/jsp/common/tree.jsp", array, 'dialogWidth=350px;dialogHeight=550px;status:no;resizable:yes;help:no;scroll:no');
	//window.open(contextPath+"/jsp/common/tree.jsp", array, 'dialogWidth=350px;dialogHeight=550px;status:no;resizable:yes;help:no;scroll:no');
    //window.open(contextPath+"/jsp/commonTreeIframe.jsp?tree=" + tree.obj + "&ctrl=" + inputCtrlId, 'TreeWindow', 'width=350,height=550,status=no,resizable=no,help=no,scroll=no');
}


function printTreeToNewWindow(tree, inputCtrlId, contextPath)
{
	if(contextPath==null || contextPath.length==0){
		contextPath = '/yourContextPath';
		alert("Error,required three params,third param is contextPath!");
	}
	showModalDialogTree(tree, inputCtrlId, contextPath);
}

function replaceAll(strPrimalString, strOldSubString, strNewSubString)
{
	var str = strPrimalString;
	
	while(str.indexOf(strOldSubString) >= 0)
	{
		str = str.replace(strOldSubString, strNewSubString);
	}
	
	return str;
}

function replaceSpecialCharacter(str)
{
	var str1 = replaceAll(str, '&amp;', '&');
	
	var str2 = replaceAll(str1, '&lt;', '<');
	
	var str3 = replaceAll(str2, '&gt;', '>');
	
	var str4 = replaceAll(str3, '&#039;', '\'');
	
	var str5 = replaceAll(str4, '&#034;', '\"');

	return str5;
}

// 得到用户选择的节点名称，并以分号";"分割,如需要其它分割符请在config中定义
dTree.prototype.getSelectedNameList = function()
{
	if(this.config.useControl==true)
	{// 使用控件
		// 判断用户使用控件类型
		var strName = '';
		if(this.config.controlType=='radio')
		{
			var str = '';
			for(var i=0; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					strName = this.aNodes[i].name;
					str += html_View2Text(strName) + this.config.strSplitNameSeparator + ' ';
					strName = '';
					break;
				}
			}
		}
		else if(this.config.controlType=='checkbox')
		{
			var str = '';
			
			for(var i=1; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					if(this.aNodes[i].isType==true)
					{// 类型
						if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='type')
						{
							strName = this.aNodes[i].name;
							str += html_View2Text(strName) + this.config.strSplitNameSeparator + ' ';
							strName = '';
						}
					}
					else
					{// 节点
						if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='node')
						{
							strName = this.aNodes[i].name;
							str += html_View2Text(strName) + this.config.strSplitNameSeparator + ' ';
							strName = '';
						}
					}
				}
			}
		}
		
		// str = replaceSpecialCharacter(str);
		
		if(str.substring(str.length - 2, str.length)==this.config.strSplitNameSeparator + ' ')
		{
			return str.substring(0, str.length - 2);
		}
		else
		{
			return str;
		}
	}
};

// 得到用户选择的节点数据库id，并以分号","分割,如需要其它分割符请在config中定义
dTree.prototype.getSelectedDatabaseIdList = function()
{
	if(this.config.useControl==true)
	{// 使用控件
		// 判断用户使用控件类型
		var str = '';
		
		if(this.config.controlType=='radio')
		{
			for(var i=0; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					str += this.aNodes[i].value + this.config.strSplitIdSeparator;
					
					break;
				}
			}
		}
		else if(this.config.controlType=='checkbox')
		{
			for(var i=1; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					if(this.aNodes[i].isType==true)
					{// 类型
						if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='type')
						{
							str += this.aNodes[i].value + this.config.strSplitIdSeparator;
						}
					}
					else
					{// 节点
						if(this.config.correlateSelectType=='all' || this.config.correlateSelectType=='node')
						{
							str += this.aNodes[i].value + this.config.strSplitIdSeparator;
						}
					}
				}
			}
		}
		
		if(str.substring(str.length - 1, str.length)==this.config.strSplitIdSeparator)
		{
			return str.substring(0, str.length - 1);
		}
		else
		{
			return str;
		}
	}
};
dTree.prototype.getSelectedTypeIdList = function()
{
	if(this.config.useControl==true)
	{// 使用控件
		// 判断用户使用控件类型
		var str = '';
		
		if(this.config.controlType=='radio')
		{
			for(var i=0; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					str += this.aNodes[i].value + this.config.strSplitIdSeparator;
					
					break;
				}
			}
		}
		else if(this.config.controlType=='checkbox')
		{
			for(var i=1; i < this.aNodes.length; i++)
			{
				if(this.aNodes[i].isChecked==true)
				{
					if(this.aNodes[i].isType==true)
					{// 类型
						str += this.aNodes[i].value + this.config.strSplitIdSeparator;
					}
				}
			}
		}
		
		if(str.substring(str.length - 1, str.length)==this.config.strSplitIdSeparator)
		{
			return str.substring(0, str.length - 1);
		}
		else
		{
			return str;
		}
	}
};
// 根据节点数据库ID和类型标志高亮显示相应单个节点
dTree.prototype.highlightSelectedNode = function(value, isType) {
	if(value=="")
	{
		value = 0;
	}
	
	if(isType=="true" || isType==true)
	{
		isType = true;
	}
	else
	{
		isType = false;
	}

	for(var i=0; i < this.aNodes.length; i++)
	{// 遍历这个树节点
		// 判断是否存在与value和isType值相等的节点
		if(this.aNodes[i].value==value && this.aNodes[i].isType==isType)
		{
			// 将相应节点加亮显示
			//alert(this.aNodes[i]._ai);
			this.s(this.aNodes[i]._ai);
			
			break;
		}
	}
};

// 根据数组中id绝对号及可操作状态，设置对应控件当前可操作状态
dTree.prototype.setNodeControlDisabled = function(id, disabled)
{
	var elementTemp = document.getElementById('ctrl' + this.obj + id);
	
	if(elementTemp!=null)
	{
		elementTemp.disabled = disabled;
	}
};

// 将所有树中的控件设置成disabled状态
dTree.prototype.setAllControlDisabled = function(disabled)
{
	if(this.config.useControl==true)
	{// 使用控件
		for(var i=0; i < this.aNodes.length; i++)
		{// 遍历这个树节点
			// 设置状态
			this.setNodeControlDisabled(this.aNodes[i]._ai, disabled);
		}
	}
};

// 根据节点数据库ID和类型标志设置选中状态
dTree.prototype.setCheckedNode = function(id, isType, checked) {
	if(isType=="true" || isType==true)
	{
		isType = true;
	}
	else
	{
		isType = false;
	}

	for(var i=0; i < this.aNodes.length; i++)
	{// 遍历树节点
		// 判断是否存在与value和isType值相等的节点
		if(this.aNodes[i].value==id && this.aNodes[i].isType==isType)
		{
			// 将相应节点加亮显示
			this.setChecked(this.aNodes[i]._ai, checked);
			
			break;
		}
	}
};

dTree.prototype.reset = function()
{
	if(this.config.useControl==true)
	{// 只有使用控件才设置选择状态
		// 判断使用控件类型
		if(this.config.controlType=='radio')
		{
			// 清除树对象选择状态
			for(var i=0; i < this.aNodes.length; i++)
			{
				this.aNodes[i].isChecked = false;
			}
			
			// 从页面控件复制选择状态
			for(var i=0; i < this.aNodes.length; i++)
			{
				var elementTemp = document.getElementById('ctrl' + this.obj + this.aNodes[i]._ai);
				if(elementTemp!=null)
				{
					if(elementTemp.checked==true)
					{
						// 设置选择状态
						this.aNodes[i].isChecked = true;
						
						break;
					}
				}
			}
		}
		else if(this.config.controlType=='checkbox')
		{
			// 复制选择状态
			for(var i=0; i < this.aNodes.length; i++)
			{
				var elementTemp = document.getElementById('ctrl' + this.obj + this.aNodes[i]._ai);
				if(elementTemp!=null)
				{
					// 设置选择状态
					this.aNodes[i].isChecked = elementTemp.checked;
				}
			}
		}
	}
};

//根据id取得节点名称
dTree.prototype.getNodeName = function(id, isType) {
	if(isType=="true" || isType==true)
	{
		isType = true;
	}
	else
	{
		isType = false;
	}

	var strName = "";
	
	for(var i=0; i < this.aNodes.length; i++)
	{   // 遍历树节点
		// 判断是否存在与value和isType值相等的节点
		if(this.aNodes[i].value==id && this.aNodes[i].isType==isType)
		{
			strName = this.aNodes[i].name;
			
			break;
		}
	}
	
	return strName;
};

 jsp页面：

<script language="JavaScript" type="text/JavaScript">
	<!--
	 
		
		var myTree = new dTree('myTree','<%=request.getContextPath()%>');
		
		myTree.config.useControl = false;
		
		myTree.config.useCookies = false;
		
		myTree.config.isEventOnOk = true;
		
		//myTree.config.controlType = ' ';
		
		myTree.config.typeIdArrayName = 'selectedTypeId';
		
		//is or not need delayload on count of tree node
		//alert("<c:out value="${fn:length(myTree)}" />");
		<c:if test="${fn:length(myTree)>delayBuildNodeCount}">
		   myTree.config.isDelayBuild = true;
		</c:if>
		
		//id, pid, name, isType, isChecked, isDisabled, url, title, target, icon, iconOpen, open
		myTree.add('0','-1','所有群组', 'true', 'false', 'true','javascript:getOrgDetail(0)');
	
		<c:forEach  var="myTreeNode" items="${myTree}" >
			myTree.add('<c:out value="${myTreeNode.keyId}"/>',
				'<c:out value="${myTreeNode.parentKeyId}"/>',
				<c:set var="strNameTemp" value="${myTreeNode.groupName}" />
				'<%=SpecialCharUtil.formatToJavaScript((String)pageContext.getAttribute("strNameTemp"))%>',
				'true',
				'false','false','javascript:getOrgDetail(<c:out value="${myTreeNode.keyId}"/>)');
				//javascript:alert(<c:out value="${myTreeNode.keyId}"/>);
				
		</c:forEach>
		
 function getOrgDetail(orgId) {
    $.ajax({
        dataType: "json",
        type: "POST",
        data: "",
        cache: false,
        url: "group_getOrgDetailById.action?ssdusergroupmain.keyId=" + orgId,
        error: function(){
            alert('加载数据出错...');
            return false;
        },
        success: function(data){
            if (data != null && data.keyId != null) {
        	 parent.$("#keyid").val(data.keyId);
        	 parent.$("#orgname").val(data.groupName);
        	 parent.$("#parentname").val(parent.$("#treeFrame").contents().find("span[id='" + data.parentKeyId + "']").text());
        	 parent.$("#orgtype").val(data.sendLevel);
        	 parent.$("#parentid").val(data.parentKeyId);
        	 parent.$("#orgtypeid").val(data.sendLevel);
       $.ajax({
        dataType: "json",
        type: "POST",
        data: "",
        cache: false,
        url: "group_getOrgDetailById.action?ssdusergroupmain.keyId=" + data.parentKeyId,
        error: function(){
            alert('加载数据出错...');
            return false;
        },
        success: function(data){
            if (data != null && data.keyId != null) {
        	 parent.$("#parentid").val(data.keyId);
        	 parent.$("#parentname").val(data.groupName);
            }
            else {
                alert('没有找到群组信息');
                return false;
            }
        }
    });
            }
            else {
                alert('没有找到群组信息');
                return false;
            }
        }
    });
}
	//-->
	</script> 
</head>
<body style="background-color:transparent;">
		 	<div style="width: 100%;height: 100%;padding: 3px 0px 0px 0px;">
    	<table align="center" width="100%" cellpadding="5" cellspacing="0" border="0" height="100%">
				    		<tbody>
				    			<tr>
				    				<td width="40%" valign="top"><!-- 模块树 -->
				    					<div style="width: 100%;height: 100%;display:block;">
				    				    	<script language="JavaScript" type="text/javascript">
					                            document.write(myTree.toString());
				                             	document.close();
		                                	</script>
				    					</div>
				    				</td>
				    			</tr>
				    		</tbody>
				    	</table>
    </div>
	</body>
 
</html>