日期:2014-05-16  浏览次数:20378 次

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


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

------解决方案--------------------
用背景图来作分支线可以省去一大堆麻烦的代码。
------解决方案--------------------
赞成楼上说法
------解决方案--------------------
路过,

----让父节点靠上,而不是居中,就没什么问题了。

----web tree,可以参考csdn左边的那棵树,(作者为Meizz)

----发了个JKTree到你的信箱(wangcl0807@msn.com)里去了,也可以参考一下

------解决方案--------------------
csdn论坛左面的树结构就可以参考下
------解决方案--------------------
应该是和windows的文件夹中的树相同吧,它里面的竖直的线应该用图片连接出来的。
------解决方案--------------------
告诉另一个办法吧,用FLASH做,超级轻松。
------解决方案--------------------
资源管理器的目录树样子不好么?楼主非要画成这么难看的!
------解决方案--------------------
楼主啊,没关系啊,FLASH和后台通信相当轻松,就多了XML转换而已。FLASH可以很轻松解决你的问题。
------解决方案--------------------
可以动态改变图片大小实现
------解决方案--------------------
下面是类的代码

JScript code
 
// 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");//内容区域