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

Question

   谢谢各位的参与，能二楼的和我说的不太一样吧；一楼的说详细点吧，
   分支有两个节点，也有三个节点的，当是三个节点时还比较麻烦，就是如何让中间的线跟中间的节点对齐；
还有就是这些分支线的长度要随各级几点的增加或收缩而变长或变短。
各位有没有这样的例子，给我发一个,必有重谢！！！([email protected])
各位看这个图吧，第一次发的图有点乱啦
          -----HR+
          ¦
          ¦
Company - -----Development+   
          ¦                   ------A+
          ¦                   ¦
          -----Administrator - ------B+
                              ¦
                              ------C+

Answer 1

HR+ 
到
Company - -----Development+    
之间明显浪费了大量空间

Answer 2

6楼的能说一下您的msn吗
我的是[email protected](l是字母）

Answer 3

路过，----让父节点靠上，而不是居中，就没什么问题了。----web tree,可以参考csdn左边的那棵树，（作者为Meizz）----发了个JKTree到你的信箱([email protected])里去了，也可以参考一下

Answer 4

我看一下啊，先行谢过
csdn里的和我要做的这个还不太一样吧，我这个是表格里有表格，所以当点击+号时，分支线的长度要变化，
并且中间那条线的位置也要变化，反正那分支线就是一直在变化的，郁闷

Answer 5

csdn论坛左面的树结构就可以参考下

Answer 6

各位看一下 我这个图片吧
图片中各个节点都是一个table，上面的数据要在点击+号时动态查询出来

Answer 7

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

Answer 8

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

Answer 9

刚才吃饭去了，刚回来
gzdiablo 能给我发一个你那个的例子吗？
我研究一下，愁死我啦，没 思路啦

Answer 10

gzdiablo 那你那个怎么让下级目录隐藏或者显示呢？

Answer 11

gzdiablo给我发一个你那个的例子好吗 [email protected]
先谢啦

Answer 12

告诉另一个办法吧，用FLASH做，超级轻松。

Answer 13

gzdiablo 首先说一声谢谢啊！能把代码发我一个吗？我自己先研究一下（[email protected])
yeqingit 用flash？我里面还有从数据库里查询的数据呢，也就是说每个表里的每行后面都有数据库里的数据，而且每个表格的名字都是从数据库里查的啊

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

下面是类的代码
// 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();
}
}

Answer 20

这个是样式表/* 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下面也能跑的起来就是连结线有点走位 现在我要出去 有空再改

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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