javascript tree第二版_tree nid tid-优快云博客

本文介绍了一种使用JavaScript实现的动态树状菜单系统。该系统通过递归算法自动生成多级菜单，并支持展开和折叠功能。文章详细展示了如何定义菜单结构、绑定事件以及更新DOM元素等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js:

/*
Copyright 2003-2005 Macrosoftchina
Author:Peter
msn:cztianyu@hotmail.com
**/
var tree0;
var isf=0;
var treeindex=0;
var ppjsp,ppid,thetreeid;
var treedata =new Array();
var treedatanid =new Array();
var treedatanidalt =new Array();
function createtree(tid){
thetreeid=tid;
}
function isparent(id,url,target,pic,isp,fullname,TreePath)
{
if(document.all(id+"r").style.display=="none")
{

    if(document.all(id+"r").innerText!="")
    {
      document.all(id+"r").style.display="";
    if(isp>0)
   {
     var img=document.all("a"+id).src;
     var imgarray=new Array();
     imgarray=img.split("/");
     if(imgarray[imgarray.length-1]!="tree_L.gif")
     {
   document.all("a"+id).src="treeimage/tree_Tminus.gif";
     }
   document.all("b"+id).src="treeimage/openfld.gif";
   }
    }
}
     else
     {
      document.all(id+"r").style.display="none";
   if(isp>0)
   {
      var img=document.all("a"+id).src;
      var imgarray=new Array();
      imgarray=img.split("/");
   if(imgarray[imgarray.length-1]!="tree_L.gif")
      {
   document.all("a"+id).src="treeimage/tree_Tplus.gif";
   }
   document.all("b"+id).src="treeimage/clsfld.gif";
   }
     }
/*
if(url!="")
{
if(target=="")
{
   window.open(url);
}
else
{
   if(target=="parent")
  {
    if(confirm("确定了吗"))
   {
      parent.location.href=url;
   }
   }
}
}*/
}
function additem(pid,textname,nid,url,target,pic,isp,fullname,TreePath, LinkFlag)
{
nid=thetreeid+""+nid;
if (pid!=thetreeid)
{
   pid=thetreeid+""+pid;
}else{
   tree0=nid;
}
treedatanid[treeindex]=nid;
treedata[treeindex]=pid+","+textname+","+nid+","+url+","+target+","+pic+","+isp+","+fullname+","+TreePath+","+ LinkFlag;
treeindex++;
}
function treebindtest(treeid,title,id,url,target,img1,jsp,meiyou0,meiyou1,meiyou2){
    if (isf==0)
    {
  document.write ("<div id='"+treeid+"'></div>");
  ppid=id;
    }
    if (jsp>0){
   img1="clsfld.gif";
}
img0="tree_L.gif";
if (isf==1)
{
// alert(document.all(ppid).iso+' '+document.all(ppid).alt);
var iso=document.all(ppid).iso;
var isoarray=new Array();
isoarray=iso.split(";");
  if (eval(isoarray[0])>0)
  {
   document.all("a"+ppid).src="treeimage/tree_Tplus.gif";
  }else{
   document.all("a"+ppid).src="treeimage/tree_T.gif";
  }
}
isf=1;
ppid=id;
eval(treeid).innerHTML+="<div id=/""+id+"/"titl=/"0/" pid=/""+id+"/" style=/"width:200;/" alt=/""+jsp+"/" iso=/""+jsp+";/"><table border=/"0/" cellpadding=/"0/" cellspacing=/"0/" > <tr onclick=/"isparent('"+id+"','"+url+"','','link.gif','"+jsp+"','"+title+"','00001')/" title=/""+title+"/" style=/"cursor:hand;/"> <td ><img src=/"treeimage/"+img0+"/" id=/"a"+id+"/"><img src=/"treeimage/"+img1+"/" id=/"b"+id+"/"></td> <td >"+title+"</td> </tr></table></div><div id=/""+id+"r/" style='display:none;width:200'></div>";
}
function binddata()
{
var iibb=0;
for (iibb=0;iibb<treedata.length ;iibb++ )
{

treedatanidalt[iibb]=0;
var tdata=new Array();
var iibb2=0;
for ( iibb2=0;iibb2<treedata.length ; iibb2++)
{ tdata=treedata[iibb2].split(",");
   if (tdata[0]==treedatanid[iibb])
   {
   treedatanidalt[iibb]++;
   }
}
//alert(treedatanidalt[iibb]);
    tdata=treedata[iibb].split(",");
bind(tdata[0],tdata[1],tdata[2],tdata[3],tdata[4],tdata[5],treedatanidalt[iibb],tdata[7],tdata[8], tdata[9]);
}
    isf=0;
    treeindex=0;
treedata =new Array();
    treedatanid =new Array();
    treedatanidalt =new Array();
}
function bind(pid,textname,nid,url,target,pic,isp,fullname,TreePath, LinkFlag){
if (thetreeid==pid)
{
    treebindtest(pid,textname,nid,url,target,pic,isp,fullname,TreePath, LinkFlag);
}else{
document.all(pid).alt=eval(eval(document.all(pid).alt)-1);
var iso=document.all(pid).iso+document.all(pid).alt+";";//

var table="";
    table=table+"<div id=/""+nid+ "/" pid=/""+ document.all(pid).pid +"/" titl='"+eval(eval(document.all(pid).titl)+1)+"' alt='"+isp+"' iso='"+iso+"'>";
table=table+"<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/" >";
    table=table+"<tr title=/""+textname+"/" onclick=/"isparent('"+nid+"','"+url+"','"+target+"','"+pic+"','"+isp+"','"+fullname+"','"+TreePath+"')/" style='cursor:hand;'>";
table=table+"<td>";
var k=0;
for(k=0;k<eval(document.all(pid).titl)+1;k++)
{
         var str=document.all(pid).iso;

      str=str.substring(0,str.length-1);
   var strsz=new Array();
   strsz=str.split(";");
      if(eval(strsz[k])==0 || document.all(pid).pid==tree0)
      {
    table=table+"<img src=/"treeimage/tree_B.gif/" width='19' height='20' >";
      }
      else
      {
    table=table+"<img src=/"treeimage/tree_I.gif/" >";
      }
}
if(isp>0)
{
       if(eval(document.all(pid).alt)==0)
    {
     table=table+"<img src=/"treeimage/tree_L.gif/" id=/"a"+nid+"/">";
    }
    else
    {
     table=table+"<img src=/"treeimage/tree_Tplus.gif/" id=/"a"+nid+"/">";
    }
    table=table+"<img src=/"treeimage/clsfld.gif/"id=/"b"+nid+"/">";
    }else{
    if(eval(document.all(pid).alt)>0)
    {
   table=table+"<img src=/"treeimage/tree_T.gif/">";
    } else{
      table=table+"<img src=/"treeimage/tree_L.gif/">";
    }
    table=table+"<img src=/"treeimage/"+pic+"/">";
}
    table=table+"</td><td>";
table=table+textname;
table=table+"</td>";
table=table+"</tr>";
table=table+"</table>";
table=table+"</div><div id='"+nid+"r' style='display:none;width:"+eval(20*(eval(document.all(pid).titl)+3)+250)+";' ></div>";
    document.all(pid+"r").innerHTML=document.all(pid+"r").innerHTML+table;
   }// end if if (thetreeid==pid)
}// end function

////////html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JavaScript TreeView </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="lib/tree.js"></script>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
/*
Copyright 2003-2005 Macrosoftchina 2003-2005
Author:Peter
msn:cztianyu@hotmail.com
*/
createtree("tree");
additem("tree","Language for develop","tree0","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree0","VC/MFC","tree00","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree00","VC/MFC Base","tree000","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree00","VC/MFC Other","tree001","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree00"," VC/MFC Form","tree002","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree0","VB","tree01","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree","Database for develop","tree1","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree1","MS-SQL Server","tree10","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree10","MS-SQL Server Base","tree100","http://www.sohu.com","_blank","link.gif","","","","");
additem("tree10","MS-SQL Server Other","tree101","http://www.sohu.com","_blank","link.gif","","","","");
binddata()