js表格树形结构.docx
《js表格树形结构.docx》由会员分享，可在线阅读，更多相关《js表格树形结构.docx（10页珍藏版）》请在冰豆网上搜索。
js表格树形结构
竭诚为您提供优质文档/双击可除
js表格树形结构
篇一：
js生成树形结构
varimagespath="/images/";
varcurrentnodename="";
functionaddanode（nodeid,nodetype,isRoot,nodetext,nodelays,nodeimage,linkimage,parentnodeid）
{
if（nodelays==1）parentnodeid="";
if（parentnodeid==""）
{
parentnode=null;
}
else
{
parentnode=eval（"document.all."+parentnodeid）;
}
htmlcode="";
htmlcode=htmlcode+"";
for（i=0;i {
switch（parentnode.rows[0].cells[i].img）
{
case"blank.gif":
case"enddots.gif":
case"endplus.gif":
case"endminus.gif":
case"singleplus.gif":
case"singleminus.gif":
case"singledots.gif":
htmlcode=htmlcode+"";
break;
case"blankdots.gif":
case"dots.gif":
case"plus.gif":
case"minus.gif":
case"topplus.gif":
case"topminus.gif":
case"topdots.gif":
htmlcode=htmlcode+" th+"blankdots.gifboRdeR=0>";
break;
}
}
htmlcode=htmlcode+"";
htmlcode=htmlcode+"";
htmlcode=htmlcode+""+nodetext+"";
htmlcode=htmlcode+"";
htmlcode=htmlcode+"";
if（parentnode!
=null）
{
eval（"document.all."+parentnodeid+"child"）.rows[0].cells[0].innerhtml=eval（"document.all."+parentnodeid+"child"）.innerhtml+htmlcode;
}
else
{
document.write（htmlcode）;
}
}
functionsetnodeFocus（nodename）
{
if（currentnodename!
=""）
{
varnodecellslen=eval（"document.all."+currentnodename）.rows[0].cells.length;
eval（"document.all."+currentnodename）.rows[0].cells[nodecellslen-1].style.background="#9cd277";
eval（"document.all."+currentnodename）.rows[0].cells[nodecellslen-1].style.color="#000000";
}
varnodecellslen=eval（"document.all."+nodename）.rows[0].cells.length;
eval（"document.all."+nodename）.rows[0].cells[nodecellslen-1].style.background="#000077";eval（"document.all."+nodename）.rows[0].cells[nodecellslen-1].style.color="#FFFFFF";
currentnodename=nodename;
if（eval（"document.all."+nodename）.nodelays==4）
{
varsplitstr=nodename.split（"no"）;
parent.document.all.paperlistifrm.src="paperlist.aspmediainfotype=
parent.document.all.abstractifrm.src="";
}
}
functionexpandchildnodes（nodename,childnodename）
{
if（eval（"document.all."+childnodename）.style.display=="none"）
{
if（eval（"document.all."+childnodename）.rows[0].cells[0].innerhtml!
=""）
{
varnodecellslen=eval（"document.all."+nodename）.rows[0].cells.length;
switch（eval（"document.all."+nodename）.rows[0].cells[nodecellslen-3].img）
{
case"endplus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"endminus.gif";break;
case"endminus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"endplus.gif";break;
case"plus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"minus.gif";break;
case"minus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"plus.gif";break;
case"topplus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"topminus.gif";break;
case"topminus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"topplus.gif";break;
case"singleplus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"singleminus.gif";break;
case"singleminus.gif":
eval（"document.all."+nodename+"linkimage"）.src=imagespath+"singleplus.gif";break;
}
eval（"document.all."+childnodename）.style.display="block";
eval（"document.all."+nodename+"nodeimage"）.src=imagespath+"of.gif";
}
}
else
{
eval（"document.all."+childnodename）.style.display="none";
varnodecellslen=eval（"document.all."+nodename）.rows[0].cells.length;
eval（"document.all."+nodename+"linkimage"）.src=imagespath+eval（"document.all."+nodename）.rows[0].cells[nodecellslen-3].img;
eval（"document.all."+nodename+"nodeimage"）.src=imagespath+eval（"document.all."+nodename）.rows[0].cells[nodecellslen-2].img;
}
setnodeFocus（nodename）;
}
functionnode（）
{
//第一层
addanode（"no0001","文件夹","False","组织结构",1
"fold.gif","topplus.gif",""）;
addanode（"no0002","文件夹","False","综合管理",1,"fold.gif","plus.gif",""）;
//第二层
addanode（"no00010001","文件","False","中心简介",2,"file.gif","minus.gif","no0001"）;
addanode（"no00010002","文件","False","机构设置",2,"file.gif","minus.gif","no0001"）;
addanode（"no00010003","文件","False","机构职能",2,"file.gif","endminus.gif","no0001"）;addanode（"no00020001","文件","False","先进性教育",2,"file.gif","minus.gif","no0002"）;addanode（"no00020002","文件","False","党务工作",2,"file.gif","minus.gif","no0002"）;
addanode（"no00020003","文件","False","工会工作",2,"file.gif","endminus.gif","no0002"）;}
node（）;
以上代码可以正确无误执行，但无法显示连接图片，你可以用软件抓取资源管理其中使用的连接图片，或留下e-mail我给你传过去。
我才发现我是一个多好的人！
篇二：
关于js树形结构
js特效代码大全（七）超全的js树形菜单共享（20xx-09-20xx:
03）
标签：
树形菜单特效代码js源代码下载分类：
js特效代码大全
js树形菜单是很常用的js特效代码，常用在管理软件当中，但是一套树形菜单已经不能满足需求，所以如果能有一套比较全面的树形菜单js特效代码，将会非常方便，下面懒人萱将超全的js树形菜单（dhtmlxtree）共享出来，相信你一定用得上。
超全的js树形菜单共享一共包括八种，下面就一一介绍：
1、不同表现方式的js树形菜单（如图所示）
2、复选框式的js树形菜单（如图所示）
左图为只可以选择单节点，右图为在选择子节点的同时选择父节点
3、可以重新排列节点并且具有拖放功能的js树形菜单（如图所示）
4、带有提示框的js树形菜单（如图所示）
如果想打开或关闭某个节点，将会弹出一个警告框；如果选中或取消某个菜单前的复选框，也会有相应的文字提示。
这个功能目前还没有想到会在什么情况下使用，但是可以先了解一下。
5、将div菜单列表转换成树的js树形菜单（如图所示）
左图为div菜单列表，右图为转换后的树。
6、可以异步加载数据的js树形菜单
7、
可以添加和删除菜单的js树形菜单（如图所示）包括添加子菜单和同级菜单两种。
8、展开关闭节点的js树形菜单（如图所示）
篇三：
一个简单的js树形菜单
一个简单的js树形菜单
上图某电子商务平台的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。
给个例子:
复制代码代码如下:
"http:
//www.w3.org/tR/xhtml1/dtd/xhtml1-transitional.dtd">
body{font-size:
12px;}
h2,h3{margin:
0;}
ul{margin:
0;padding:
0;list-style:
none;}
#outer_wrapli{padding-left:
30px;line-height:
24px;}
.controlsymbol{padding:
05px;border:
1pxsolid#adff2f;cursor:
pointer;}
标题1
内容1
内容2
内容3
内容4
标题1_1
内容1_1
内容1_2
内容1_3
内容1_4
标题1_2
内容1_1
内容1_2
内容1_3
内容1_4
然后添加事件：
复制代码代码如下:
varinnertext=document.innertextinnertext:
textcontent;
varspan=document.createelement（span）;
span[innertext]=-;
span.classname=controlsymbol;
function$（id）{
returndocument.getelementbyid（id）;
}
function$_（）{
varargs=arguments;
varret=[];
for（vari=0;i vartemp=document.getelementsbytagname（args[i]）;
try{
ret=ret.concat（array.prototype.slice.call（temp,0））;
}catch（e）{
for（varj=0;j ret.push（temp[j]）;
}
}
}
returnret;
}
functionaddsymbol（h）{
varinnerspan=span.clonenode（true）;
h.insertbefore（innerspan,h.firstchild）;
}
functionnext（el）{
while（el.nextsibling）{
if（el.nextsibling.nodetype==1）{
returnel.nextsibling;
}
el=el.nextsibling;
}
returnnull;
}
varouterwrap=$（outer_wrap）;
varhs=$_（h2,h3）;
for（vari=0;i addsymbol（hs[i]）;
}
outerwrap.onclick=function（event）{
event=event||window.event;
vart=event.target||event.srcelement;
if（t.classname==controlsymbol）{
varsn=next（t.parentnode）;
varsnstyle=next（t.parentnode）.style;
snstyle.display=（snstyle.display==block||snstyle.display==）none:
block;t[innertext]=t[innertext]==+-:
+;
}
}
不过用的多的可能是动态的添加菜单，也就是动态的生成html序列。
一个例子：
复制代码代码如下:
标题2:
[
内容1,
内容2,
内容3,
内容4,
{标题2_1:
[内容2_1,内容2_2,内容2_3,内容2_4]},{标题2_2:
[内容2_1,内容2_2,内容2_3,内容2_4]},内容5
]
}
varfragment=document.createelement（ul）;
functionconcattree（tree）{
vararray=[];
for（varkeyintree）{
array.push（）;
array.push（key）;
array.push（）;
for（vari=0;i if（tree[key][i].constructor==object）{
array=array.concat（concattree（tree[key][i]））;}else{
array.push（）;
array.push（tree[key][i]）;
array.push（）;
}
}
array.push（）;
}
returnarray;
}
fragment.innerhtml=concattree（tree）.join（）;$（outer_wrap）.appendchild（fragment.firstchild）;
像上面的方法也可以用来生成表格，扯远了，比如复制代码代码如下:
varoarray={
thead:
[标题一,标题二,标题三,标题四],
tbody:
[
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
],
tfoot:
[25,26,27,28]
}
functioncreatetable（arr）{
varhtml=[];
html.push（）;
for（varkeyinarr）{
html.push（）;
if（key==thead）{
assemtag（arr[key],html,th）
}elseif（key==tfoot）{
assemtag（arr[key],html,td）
}elseif（key==tbody）{
for（vark=0,len_1=arr[key].length;k }
}
html.push（）;
}
html.push（）;
vartemp=document.createelement（div）;
temp.innerhtml=html.join（）;
returntemp.firstchild;
}
functionassemtag（array,html,tag）{
html.push（）;
vars=;
vare=;
for（varj=0,len=array.length;j html.push（array[j]）;
html.push（e）;
}
html.push（）;
}
document.body.appendchild（createtable（oarray））;
升级会员 