高分求如何画树状结构中的线（线的长度是变化的）
如下图所示，当点击+时，显示他的子目录，并且随着子目录的增多，他们的上级目录中的线的长度是要变化的
我目前是用表格的嵌套来生成子目录的（程序控制,节点从数据库中查询），但不会画他们的分支线啦(实际中的线是实线)
各位高手帮帮忙啦，急啊！！
|-----HR+
|
|
Company+-----Development+
| ------A
| |
|----Administrator -|-----B
|
------C
[解决办法]
用背景图来作分支线可以省去一大堆麻烦的代码。
[解决办法]
赞成楼上说法
[解决办法]
路过，
----让父节点靠上，而不是居中，就没什么问题了。
----web tree,可以参考csdn左边的那棵树，（作者为Meizz）
----发了个JKTree到你的信箱(wangcl0807@msn.com)里去了，也可以参考一下
[解决办法]
csdn论坛左面的树结构就可以参考下
[解决办法]
应该是和windows的文件夹中的树相同吧，它里面的竖直的线应该用图片连接出来的。
[解决办法]
告诉另一个办法吧，用FLASH做，超级轻松。
[解决办法]
资源管理器的目录树样子不好么?楼主非要画成这么难看的!
[解决办法]
楼主啊，没关系啊，FLASH和后台通信相当轻松，就多了XML转换而已。FLASH可以很轻松解决你的问题。
[解决办法]
可以动态改变图片大小实现
[解决办法]
下面是类的代码
// 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();
}
}
