javascript tree

抄的

function $(id)
{

return document.getElementById(id);

}

// JavaScript Document

var Tree=function(containnerid)
{

var _base=this;

var _conid=containnerid;

var _niArr=new Array();

//设置根节点

this.setRoot=function(title)
{

return _base.addChild(_conid,title);

}

//添加子节点

this.addChild=function(parentid,text)
{

var div=document.createElement("div");

div.id=getChildID(parentid);

div.className="treeText";

var a=document.createElement("a");

a.href=arguments[2]?arguments[2]:"javascript:void(0);";

a.appendChild(document.createTextNode(text));

div.appendChild(a);

$(parentid).appendChild(div);

return div;

}

//通知所有节点添加完毕，开始格式化节点

this.stopAdd=function()
{

formatNode(true,_niArr[0][0],new Array());

}

//测试用，写出节点数组

function writeAll()
{

for(var i=0;i<_niArr.length;i++)

for(var j=0;j<_niArr[i].length;j++)

document.write("_niArr[" + i + "][" + j + "].id:" + _niArr[i][j].id + "<br/>");

}

//格式化节点

function formatNode(last,ni,blank)
{

if(!ni)
return;

else
{

var len=ni.childID.length;

var level=getLevel(ni.id);

if(ni.parentID==-1)
{

for(var i=0;i<len;i++)
{

if(i+1==len)
last=true;

else
last=false;

formatNode(last,_niArr[level][ni.childID[i]],new Array());

}

}
else
{

var img=document.createElement("img");

img.src="Images/folder.gif";

img.className="treeImg";

$(ni.id).insertBefore(img,$(ni.id).firstChild);

img=document.createElement("img");

if(len)
{

if(last)

img.src="Images/Lplus.gif";

else

img.src="Images/Tplus.gif";

img.style.cursor="pointer";

if(img.attachEvent)

img.attachEvent("onclick",function()
{
expandChild(ni,last)
}

);

else

img.addEventListener("click",function()
{
expandChild(ni,last)
}

,false);

}

else
{

if(last)
{

img.src="Images/L.gif";

}
else
{

img.src="Images/T.gif";

}

}

img.className="treeImg";

$(ni.id).insertBefore(img,$(ni.id).firstChild);

if(level>2)
$(ni.id).style.display="none";

for(var i=blank.length-1;i>=0;i--)
{

var img1=document.createElement("img");

if(blank[i])
{

img1.src="Images/B.gif";

img1.style.width="12px";

img1.style.height="18px";

}

else
img1.src="Images/I.gif";

$(ni.id).insertBefore(img1,$(ni.id).firstChild);

}

for(var i=0;i<len;i++)
{

var arr=new Array();

for(j=0;j<blank.length;j++)
{

arr.push(blank[j]);

}

if(last)
arr.push(true);

else
arr.push(false);

//alert(arr);

formatNode((i+1==len)?true:false,_niArr[level][ni.childID[i]],arr);

}

}

}

}

//返回对应于父节点的子节点ID

function getChildID(id)
{

var level=getLevel(id);

var ni=new NodeInfo();

if(_niArr[level])
{//如果不是第一次到达这个层次

if(level==1)
{//如果level=1

ni.id=id + _niArr[1].length;

ni.parentID=0;

//

_niArr[0][0].childID.push(_niArr[1].length);

_niArr[1].push(ni);

}
else
{//如果时在level不为1

for(var i=0;i<_niArr[level-1].length;i++)
{

if(id==_niArr[level-1][i].id)
{

ni.parentID=i;

_niArr[level-1][i].childID.push(_niArr[level].length);

ni.id=id + _niArr[level-1][i].childID.length;

_niArr[level].push(ni);

break;

}

}

}

}
else
{//如果是第一次达到这个层次

//如果是创建level=1的层

if(level==1)
{

ni.id=id + "0";

ni.parentID=0;

//创建树的跟节点

var rootni=new NodeInfo();

rootni.id=id;

rootni.childID.push(0);

rootni.parentID=-1;

_niArr.push(new Array(rootni));

_niArr.push(new Array(ni));

//writeAll();

}
else
{//如果不是在level>1时创建新层

ni.id=id + "0";

ni.parentID=id;

for(var i=0;i<_niArr[level-1].length;i++)
{

if(id==_niArr[level-1][i].id)
{

ni.parentID=i;

_niArr[level-1][i].childID.push(0);

_niArr.push(new Array(ni));

break;

}

}

}

}

return ni.id;

}

//展开子节点

function expandChild(ni,last)
{

var level=getLevel(ni.id);

//alert(level + ":" + $(ni.id).innerHTML);

if(ni.expand)
{

for(var i=0;i<ni.childID.length;i++)
{

$(_niArr[level][ni.childID[i]].id).style.display="none";

}

//var obj=$(ni.id).firstChild;

var obj=$(ni.id).childNodes[level-2];

if(last)

obj.src="Images/Lplus.gif";

else

obj.src="Images/Tplus.gif";

obj.nextSibling.src="Images/folder.gif";

ni.expand=false;

}
else
{

for(var i=0;i<ni.childID.length;i++)
{

$(_niArr[level][ni.childID[i]].id).style.display="";

}

var obj=$(ni.id).childNodes[level-2];

if(last)

obj.src="Images/Lminus.gif";

else

obj.src="Images/Tminus.gif";

obj.nextSibling.src="Images/folder2.gif";

ni.expand=true;

}

}

//返回节点的深度

function getLevel(id)
{

return id.length-_conid.length + 1;

}

//返回节点的标志

function getTag(level,order)
{}

//显示子节点

function showChild(obj)
{

obj.src=(obj.src.indexOf("plus")!=-1)?obj.src.replace("plus","subs"):obj.src.replace("subs","plus");

var level=obj.parentNode.id.length-_conid.length;

for(var i=0;i<_idArr[level].length;i++)
{

if(_idArr[level][i][0].indexOf(obj.parentNode.id)!=-1)

$(_idArr[level][i][0]).style.display=($(_idArr[level][i][0]).style.display=="")?"none":"";

}

//var child=$(obj.parentNode.id + "0");

//child.style.display=(child.style.display=="")?"none":"";

}

//节点信息封装类

var NodeInfo=function()
{

this.id=new String();

this.childID=new Array();

this.parentID=new Number();

this.expand=false;

}

}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" src="yl.js"></script>

</head>
<body >
dssssssssssssssss
<div id="divRoot"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">

window.οnlοad=function(){
alert('ok1');
var t=new Tree("divRoot");
alert('ok2');
t.setRoot("待办事宜");
alert('ok3');
t.setRoot("日程安排");

t.setRoot("任务安排","renwu.jsp");

var sm=t.setRoot("短消息");

t.addChild(sm.id,"已收到","inbox.jsp");

t.addChild(sm.id,"已发送","sendbox,jsp");

t.stopAdd();

}

</script>