高分求如何画树状结构中的线（线的长度是变化的）

[SADOCom]

如下图所示，当点击+时，显示他的子目录，并且随着子目录的增多，他们的上级目录中的线的长度是要变化的
我目前是用表格的嵌套来生成子目录的（程序控制,节点从数据库中查询），但不会画他们的分支线啦(实际中的线是实线)
各位高手帮帮忙啦，急啊！！


|-----HR+
|
|
Company+-----Development+
| ------A
| |
|----Administrator -|-----B
|
------C

[huainansto]

应该是和windows的文件夹中的树相同吧，它里面的竖直的线应该用图片连接出来的。

[SADOCom]

您好gzdiablo，就是这样的，有这样类似的例子吗，不过我的节点是一个表格，下级节点就嵌套在他里面的，
这样逐层嵌套下去。（怎么发图片，不知道怎么贴）注：表格包扩4列，他的边框为0，第一列为节点显示的内容（独立的表格，边框不为0，他包括6行），第二列为+或者-号，第三列就放分支线，第四列用来存放他的下级节点，下级节点还是这种结构。

[gzdiablo]

没错我这个结构和你的差不多 只是顺序不大一样 1是上级分枝线 2是内容 3是子节点容器
不过代码比较复杂

[gzdiablo]

代码是我写的工作流设计器中的 因为都封装好了所以要分离出来需要点时间

[喜受写代码的小强]

可以动态改变图片大小实现

[yeqingit]

楼主啊，没关系啊，FLASH和后台通信相当轻松，就多了XML转换而已。FLASH可以很轻松解决你的问题。

[SADOCom]

恩 先让他支持 IE就 行
他们的系统也是在IE中运行的

[gzdiablo]

下面是类的代码

// JavaScript Document
//部分扩展函数
var $C = function(_tag){return document.createElement(_tag);}
var $ = function(_id){return document.getElementById(_id);}
String.prototype.trim = function(value,icase){return this.replace(/(^\s+)|(\s+$)/g,"");}
Array.prototype.indexOf = function(value){for(var i=0,l=this.length;i<l;i++)if(this[i]==value)return i;return -1;}
Array.prototype.Remove = function(value){for(var i=0,l=this.length;i<l;i++)if(this[i]==value){return this.splice(i,1);}}
Array.prototype.Replace = function(value,source){for(var i=0,l=this.length;i<l;i++)if(this[i]==value){this[i]=source;break;}}
Array.prototype.ReplaceAll = function(value,source){for(var i=0,l=this.length;i<l;i++)if(this[i]==value){this[i]=source;}}
Array.prototype.Clear = function(){this.splice(0,this.length);}


var System = {};
System.UI = {}
System.UI.ntreeNode = SYSTEM_UI_NTREENODE;

//树结点类
function SYSTEM_UI_NTREENODE()
{
	classType = "SYSTEM_UI_NTREENODE";
	this.initialize.apply(this,arguments);
}
SYSTEM_UI_NTREENODE.prototype = {
	initialize:function(_parent,_text)//初始化类 _parent是父节点 _text是本节点的文本
	{
		this.top = _parent.top;
		this.parent = _parent;
		this._text = _text;
		this._expand = false;
		this.children = [];
		this.initElement();
		this.setElement();
		this.initEvent();
		this.text(_text);
		this.parent.children.push(this);
		this.resizeBar();
	},
	initElement:function()//初始化元素
	{
		this.mainObj = $C("table");//节点主载体
		var otbody = $C("tbody");//tablebody
		var otr = $C("tr");//tr
		this.pikeTd = $C("td");//纵向连结线区域
		this.infoTd = $C("td");//内容区域
		this.childTd = $C("td");
		this.childField = $C("div");//子节点容器
		this.infoField = $C("span");//内容区域
		this.expandObj = $C("img");//$C("img");//展开元素
		this.imgBar1 = this.createPike(2,2);//纵向连接线
		this.imgBar2 = this.createPike(8,2);//节点前置连接线
		this.imgBar3 = this.createPike(8,2);//节点后置连接线
		this.mainObj.appendChild(otbody);
		otbody.appendChild(otr);
		//列
		with(otr)
		{
			appendChild(this.pikeTd);
			appendChild(this.infoTd);
			//appendChild(this.expandTd);
			appendChild(this.childTd);
		}
		//内容区域
		with(this.infoTd)
		{
			appendChild(this.imgBar2);
			appendChild(this.infoField);
			appendChild(this.expandObj);
			appendChild(this.imgBar3);
		}
		this.childTd.appendChild(this.childField);
		//this.infoTd.noWrap = true;
		this.pikeTd.appendChild(this.imgBar1);
		this.parent.childField.appendChild(this.mainObj);
	},
	setElement:function()//设置元素属性
	{
		with(this.mainObj)
		{
			border = cellPadding = cellSpacing = 0;
			bgColor = "#FFFFFF";
		}
		this.pikeTd.vAlign = "middle";
		this.infoField.className = "unSelectedNode";
		with(this.expandObj)
		{
			className = "expandObj";
			align = "absmiddle";;
			src = paths + "img/p1.gif";
		}
		this.childField.style.display = this.imgBar3.style.display = "none";
	},
	initEvent:function()//初始化事件
	{
		var self = this;
		this.expandObj.onclick = function()
		{
			self.expand(!self.expand());
		}
		this.infoField.onclick = function()
		{
			self.top.selectNode(self);
		}
	},
	killEvent:function()//卸载事件
	{
		this.infoField.onclick = this.expandObj.onclick = null;
	},
	createPike:function(w,h)
	{
		var oImg = $C("img");
		with(oImg)
		{
			className = "exprline1";
			style.overflow = "hidden";
			style.width = style.height = "2px";
			width = height = 2;
			align = "absmiddle";
			src = paths + "img/dot.gif";
			//if(typeof(w)=="number")width = w ;
			//if(typeof(h)=="number")height = h;
			if(typeof(w)=="number")style.width = w + "px";
			if(typeof(h)=="number")style.height = h + "px";
		}
		return oImg;
	},
	text:function(_text)//修改本节点文本的方法
	{
		if(typeof(_text)=="string" && _text.trim())
			this.infoField.innerHTML = this._text = _text;
		return this._text;
	},
	resizeBar:function()//重新加载连结线长度
	{
		if(this.children.length>0)
		{
			var aa = null;
			if(this.children.length==1)
			{
				with(this.children[0])
				{
					imgBar1.style.height = "2px";
					pikeTd.vAlign = "middle";
					return;
				}
			}
			for(var i=0,l=this.children.length;i<l;i++)
			{
				var aa = this.children[i];
				aa.imgBar1.style.height = aa.imgBar1.style.width = "2px";
				aa.pikeTd.vAlign = "middle";
				aa.imgBar1.style.height = aa.pikeTd.offsetHeight + "px";
			}
			var tempint = 0;
			aa = this.children[0];
			tempint = aa.pikeTd.offsetHeight;
			aa.imgBar1.style.height = [(tempint>>1) + (tempint&1) + 1,"px"].join('');
			aa.pikeTd.vAlign = "bottom";
			
			aa = this.children[this.children.length-1];
			tempint = aa.pikeTd.offsetHeight;
			aa.imgBar1.style.height = [(tempint>>1) + (tempint&1) + 1,"px"].join('');
			aa.pikeTd.vAlign = "top";
		}
		if(this.parent && typeof this.parent.resizeBar == "function")this.parent.resizeBar();
	},
	expand:function(value)//目录展开方法
	{
		if(typeof(value)=="boolean")
		{
			this._expand = value;
			this.imgBar3.style.display = this.childField.style.display = this._expand?"":"none";
			this.expandObj.src = [paths,this._expand?"img/p2.gif":"img/p1.gif"].join('')
			this.resizeBar();
		}
		return this._expand;
	},
	addChild:function(_text)//添加子节点的方法 _text是子节点的文本
	{
		new System.UI.ntreeNode(this,_text);
		this.expand(true);
	},
	removeChild:function(value)//删除子节点方法 value可以是子节点的实例 也可以是0为基础的子节点的序列
	{
		switch(typeof(value))
		{
			case "object":
				value = this.children.indexOf(value);
			case "number":
				this.children[value].unload(true);
		}
		this.top.selectNode(this);
		this.parent.resizeBar();
	},
	removeAll:function()//删除所有子节点
	{
		for(var i=0,l=this.children.length;i<l;i++)
			this.children[i].unload(true);
		this.top.selectNode(this);
		this.parent.resizeBar();
	},
	unload:function(_quickunload)//卸载类实例 释放内存
	{
		this.top.selectNode(this.parent);
		this.parent.children.Remove(this);
		this.removeAll();
		this.killEvent();
		this.parent.childField.removeChild(this.mainObj);
		if(_quickunload!=true)this.parent.resizeBar();
		this.top.selectNode(this.parent);
		for(var o in this)delete this[o];
	}
}

//树类
System.UI.ntree = SYSTEM_UI_NTREE;
function SYSTEM_UI_NTREE()
{
	this.className = "SYSTEM_UI_NTREE";
	this.initialize.apply(this,arguments);
}
SYSTEM_UI_NTREE.prototype = {
	initialize:function(_container,_rootText)//初始化树的方法 _container是树的HTML容器实例 _rootText是跟节点的文本
	{
		this.parent = this;
		this.top = this;
		this.childField = this.container = _container;
		this.childField.className = "ntree";
		this.children = [];
		this.rootNode = new System.UI.ntreeNode(this,_rootText);
		this.selectedNode = this.rootNode;
		this.selectNode();
	},
	selectNode:function(node)//选中节点 将当前选中节点设置为node node是本树中树节点的实例
	{
		if(node && node!=this.selectedNode)
		{
			this.selectedNode.infoField.className = "unSelectedNode";
			this.selectedNode = node;
		}
		this.selectedNode.infoField.className = "selectedNode";
	},
	resizeBar:function(){},
	unload:function()//卸载树
	{
		this.rootNode.unload();
	}
}

[gzdiablo]

这个是样式表

/* CSS Document */
.ntree .exprline1
{
	background:#0A246A;
}
.ntree .infoField
{
	background:#EEEEEE;
	font-size:10.5pt;
	margin:2px 2px 2px 2px;
	cursor:pointer;
}
.ntree.expandObj
{
	cursor:pointer;
}

.ntree .selectedNode{
	background:#0A246A;
	font-size:10.5pt;
	margin:2px 2px 2px 2px;
	cursor:pointer;
	color:#FFFFFF;
}

.ntree .unSelectedNode{
	background:#EEEEEE;
	font-size:10.5pt;
	margin:2px 2px 2px 2px;
	cursor:pointer;
}

下面是测试的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="ntree.css" rel="stylesheet" type="text/css" />
</head>

<body>
<input type="button" value="+" id="button1" onclick="addTreeNode();"/>
<input type="button" value="-" id="button2" onclick="removeTreeNode();"/>
<div id="odiv"></div>
</body>
</html>
<script language="javascript" src="ntree.js"></script>
<script language="javascript">
var aa = null;
var paths = "./";
var indexCount = 0;
window.onload = function()
{
	//alert(System.UI.ntreeNode);
	aa = new System.UI.ntree($("odiv"),["node",indexCount++].join(''));
}
function addTreeNode()
{
	aa.selectedNode.addChild(["node",indexCount++].join(''));
}
function removeTreeNode()
{
	aa.selectedNode.unload();
}
</script>

.....这个麻烦干什么直接放到网上不就行了... ==给你个地址
http://www.techease.com.cn/gzdiablo/ntree/ntree.html

没怎么进行详细的测试 可能有很多bug 单行的行高尽量控制为偶数.
还有 好像FF下面也能跑的起来就是连结线有点走位 现在我要出去 有空再改

[SADOCom]

我看一下啊，研究一下啊
先向您说一声谢谢啊
等我弄出来再好好谢你啊 呵呵

[SADOCom]

gzdiablo ，我能不能够跟您交流一下啊，我很多不懂的啊
能加我msn([e-mail])吗,QQ也可以155286218

[ClintNorthwood]

看看~

[SADOCom]

客户的需求就是这样，没办法啊
我原本就没做过这方面的东西，对js，css，什么的也不熟，现在急啊
有谁做过这样的东西啊，郁闷啊，北京地区现金请教啦（TEL:[phone])

[gzdiablo]

==给点时间我

[SADOCom]

好的，gzdiablo，可以联系我手机

[gzdiablo]

因为table的样式控制比较困难先只支持IE

[SADOCom]

在各位的帮助下，特别是在gzdiablo大力帮助下，我那个东西基本搞出来啦，在此，强烈感谢gzdiablo同志，并致以深深的敬意！嘿嘿！
并祝gzdiablo同志及各位生活幸福，美女多多，工作顺利，钞票源源不断。。。

[SADOCom]

gzdiablo，我这里每个节点是一个table（包括一列6行，上面有个＋，－号可以控制table显示几行）那这个该怎么弄呢？麻烦您把他换成table看一下吧！因为你写的东西我还没大看懂，所以我自己不好修改
就麻烦您啦！！

[gzdiablo]

一列6行 还是 一行6列?

[SADOCom]

准确说是一列9行，不过这9行，刚开始时是显示4行，table的第4行是个＋号，也就是点击+号时显示
表格的全部信息，当全部显示时，最后一行是“－”行，再点击－号时，又回到初始的4行。
现在问题就是当点击“＋”号显示整个表格时，分支线的长度应该怎么随着调整呢？我现在还没看明白