抄的
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>