一棵用JAVASCRIPT实现的可无限扩展的树

时间：2022-06-16 18:29:55

其中browse.gif为叶节点标记，minus.gif为展开后的枝节点标记，plus.gif为展开前的枝节点标记（图片就略了）

<%@ page language="java" pageEncoding="UTF-8"%>
<html>

<head>
<title>无限级树形菜单</title>
<style>
#A1 td { vertical-align: middle; }
#A1 td.bj { font-family: Wingdings; color: GREEN; text-align: center; }
#A1 td.bj , #A1 td.kg { width: 24; }
#A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; }
#A1 a:hover { color: #0ff080; text-decoration: none; }
a{text-decoration:none;}
</style>

<script language="JavaScript">

function treeClass(id)
{
this.id = id;
this.HTMLdata = "";

this.start = function() //菜单开始
{
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="'+this.id+'">';
}

this.end = function() //菜单结束
{
this.HTMLdata += '</table>';
}


this.m_start = function(name,url,tt) //菜单组开始
{
this.HTMLdata += '<tr><td class="bj"><img src="'+(tt==1?'images/minus.gif':'images/plus.gif')+'" id="'+(tt==1?'1':'0')+'" title="'+(tt==1?'点击折叠':'点击展开')+'" onclick="zgmm()"></td>';
this.HTMLdata += '<td><a href="'+url+'">'+name+'</a></td>';
this.HTMLdata += '</tr>';
this.HTMLdata += '<tr style="display: '+(tt==1?'block':'none')+';">';
this.HTMLdata += '<td class="bj"> </td>';
this.HTMLdata += '<td>';
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0">';
}

this.m_end = function() //菜单组结束
{
this.HTMLdata += '</table></td></tr>';
}

this.add_Sub = function(name,url,kj) //添加菜单项
{
this.HTMLdata += '<tr><td class="bj"><img src="images/browse.gif"></td><td>';
this.HTMLdata += '<a target="'+kj+'" href="'+url+'">'+name+'</a>';
this.HTMLdata += '</td></tr>';
}

this.print = function() //输出菜单
{
document.write(this.HTMLdata);
}
}

//点击后的处理
function zgmm()
{
var ero = event.srcElement;
var mo = event.srcElement.parentElement.parentElement.nextSibling;
mo.style.display = (mo.style.display=="none")?"block":"none";
if(ero.id==0){
ero.src = "images/minus.gif";
ero.title = "点击折叠";
ero.id=1;
}else if(ero.id==1){
ero.src = "images/plus.gif";
ero.title = "点击展开";
ero.id=0;
}
}
</script>
</head>

<body>
<script language="JavaScript">
// 说明：
// 菜单组开始，m_start(name,tt); name为菜单组名称，tt为1菜单组初始时展开，为0不展开
// 菜单组结束：m_end();
// 添加菜单项：add_Sub("菜单项名称","url地址","框架名");

var tObj = new treeClass("A1")
tObj.start();
tObj.m_start("贵州省","src/guizhou.html","1");
tObj.m_start("贵阳市","src/guiyang.html",0);
tObj.m_start("花溪区","src/huaxi.html",0);
tObj.m_start("花溪局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("花溪局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("金牛区","src/huaxi.html",0);
tObj.m_start("金牛局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("六盘水市","src/guiyang.html",0);
tObj.m_start("六盘区","src/huaxi.html",0);
tObj.m_start("六盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("六盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("七盘区","src/huaxi.html",0);
tObj.m_start("七盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("七盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("遵义市","src/guiyang.html",0);
tObj.m_start("革命区","src/huaxi.html",0);
tObj.m_start("革命局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("革命局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("上沿区","src/huaxi.html",0);
tObj.m_start("上沿局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("上沿局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("安顺市","src/guiyang.html",0);
tObj.m_start("安顺区","src/huaxi.html",0);
tObj.m_start("安顺局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("安顺局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("青阳区","src/huaxi.html",0);
tObj.m_start("青阳局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("青阳局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("铜仁市","src/guiyang.html",0);
tObj.m_start("铜仁区","src/huaxi.html",0);
tObj.m_start("铜仁局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("铜仁局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("毕节市","src/guiyang.html",0);
tObj.m_start("节日区","src/huaxi.html",0);
tObj.m_start("节日局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("节日局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("黔南州","src/guiyang.html",0);
tObj.m_start("迁徙区","src/huaxi.html",0);
tObj.m_start("迁徙局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("迁徙局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_end();


tObj.end();
tObj.print();

</script>

</body>

</html> 

标签：

相关文章