求教：关于菜单导航树的设计

Question

DefineTree.css
body{background-color:#F2F2F2;padding-bottom:25;font-size:9pt;}
.Tree{width:100%;height:100%;background-color:#F2F2F2;padding:5 0 10 10}
td.Node{height:22px;vertical-align:middle;font-family:verdana;font-size:12px;color:#000000;}
#Tree span{font-family:verdana;font-size:12px;color:#000000;background-color:#F2F2F2;border:1px solid #F2F2F2;padding:2 4;margin-left:3;height:20px;cursor:hand;}
#Tree span.NodeOver{background-color:#cccccc;border:1px solid #999999;}
#Tree span.NodeFocus{background-color:#FFFFFF;border:1px solid #999999;}
#Tree input{margin-bottom:2px}

Answer 1

DefineTree.js
var ImgPath=["ImgLib/Expand.gif","ImgLib/Collapse.gif","ImgLib/Node.gif"];
function DefineTree(m_Object,m_Target,m_Check)
{
this.Object=m_Object;
this.Target=m_Target;
this.Child=0;
this.Node=0;
this.Msg=[];
this.Icon=[];
this.ShowCheck=m_Check;
this.Html="<table id='Tree' onselectstart='return false' cellspacing=0 cellpadding=0 border=0>";
for(iIndex=0;iIndex<ImgPath.length;iIndex++)
{
var TempImage=new Image();
this.Icon[iIndex]=TempImage.src=ImgPath[iIndex];
}
}
DefineTree.prototype.AddFolder=function(m_Text,m_Link,m_Show)
{
this.Msg[this.Node]=[m_Text,m_Link?m_Link:''];
this.Html+="<tr><td class='Node'><img src='"+(m_Show?this.Icon[1]:this.Icon[0])+"' id='Img"+this.Child+"' border=0 align='absmiddle' onclick='"+this.Object+".Expand("+this.Child+")'><input type='checkbox' name='TreeFolder' onclick='"+this.Object+".CheckAll(this,"+this.Child+",event)' style='display:"+(this.ShowCheck?'':'none')+"'><span onmouseover='DoOver(this)' onmouseout='DoOut(this)' onmousedown='"+this.Object+".Light(this,"+this.Node+");"+this.Object+".Expand("+this.Child+")' title='"+m_Text+"'>"+m_Text+"</span></td></tr><tr id='Child"+this.Child+"' style='display:"+(m_Show?'':'none')+"'><td class='Node'>";
this.Html+="<table cellspacing=0 cellpadding=0 border=0 style='margin-left:18;'>";
this.Child++;
this.Node++;
}DefineTree.prototype.AddNode=function(m_Text,m_Link)
{
this.Msg[this.Node]=[m_Text,m_Link?m_Link:''];
this.Html+="<tr><td class='Node'><img src='"+this.Icon[2]+"' align='absmiddle' onclick='"+this.Object+".Light(this.nextSibling.nextSibling,"+this.Node+")'><input type='checkbox' name='TreeNode' onclick='"+this.Object+".ParentCheck(this,event)' style='display:"+(this.ShowCheck?'':'none')+"'><span onmouseover='DoOver(this)' onmouseout='DoOut(this)' onmousedown='"+this.Object+".Light(this,"+this.Node+")' title='"+m_Text+"'>"+m_Text+"</span></td></tr>";
this.Node++;
}DefineTree.prototype.EndFolder=function()
{
this.Html+="</table></td></tr>";
}
DefineTree.prototype.Expand=function(m_ChildNum,m_Flag)
{
var IsExpand=document.getElementById("Child"+m_ChildNum).style.display;
document.getElementById("Img"+m_ChildNum).src=IsExpand=='none'?this.Icon[1]:this.Icon[0];
document.getElementById("Child"+m_ChildNum).style.display=IsExpand=='none'?'':'none';
}DefineTree.prototype.ExpandAll=function(m_Flag)
{
if(this.Child>0)
for(iIndex=0;iIndex<this.Child;iIndex++)
{
document.getElementById("Img"+iIndex).src=m_Flag?this.Icon[1]:this.Icon[0];
document.getElementById("Child"+iIndex).style.display=m_Flag?'':'none';
}
}DefineTree.prototype.CheckAll=function(m_Object,m_ChildNum,m_Event)
{
m_Object.blur();
var m_Event=window.event;
if(!m_Event.shiftKey)return;
var Child=document.getElementById("Child"+m_ChildNum);
var Node=Child.getElementsByTagName("INPUT");
for(iIndex=0;iIndex<Node.length;iIndex++)Node[iIndex].Checked=m_Object.Checked;
this.ParentCheck(m_Object,m_Event);
}DefineTree.prototype.ParentCheck=function(m_Object,m_Event)
{
m_Object.blur();
m_Event=m_Event?m_Event:(window.event)?window.event:"";
if(!m_Event.shiftKey)return;
for(iIndex=this.Child-1;iIndex>=0;iIndex--)
{
var CheckParent=true;
var Child=document.getElementById("Child"+iIndex);
var Node=Child.getElementsByTagName("INPUT");
for(jIndex=0;jIndex<Node.length;jIndex++)if(!node[jIndex].Checked)CheckParent=false;
document.getElementById("Img"+i).nextSibling.Checked=CheckParent;
}
}DefineTree.prototype.GetCheckedValue=function()
{
var value=[];
var Node=document.getElementById('Tree').getElementsByTagName("INPUT");
for(iIndex=0;iIndex<Node.length;iIndex++)if(Node[iIndex].Checked&&Node[iIndex].name=="TreeNode")value[value.length]=this.Msg[i][0];
return value;}
DefineTree.prototype.Init=function()
{
this.Html+=(this.Node>0?"":"<tr><td>暂时没有数据</td></tr>")+"</table>";
document.write(this.Html);
}var m_Temp=null;
function DoOver(m_Object)
{
m_Object.className='NodeOver';
}function DoOut(m_Object)
{
m_Object.className=(m_Temp==m_Object?'NodeFocus':'');
}
DefineTree.prototype.Light=function(m_Object,m_NodeNum)
{
if(!m_Temp)m_Temp=m_Object;
m_Temp.className='';
m_Object.className='NodeFocus';
m_Temp=m_Object;
if(this.Msg[m_NodeNum][1])window.open(this.Msg[m_NodeNum][1],this.Target);
}

Answer 2

Tree.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无限级树开菜单示例</title>
<link rel=stylesheet href="DefineTree.css" type="text/css">
<script language="javascript" src="DefineTree.js"></script>
<style>
body{font-size:12px}
a{font-size:12px;color:red;text-decoration:none}
a:hover:{color:red;text-decoration:underline;}
</style>
</head>
<body>
<nobr>全部展开<img src='ImgLib/Expand.gif' onclick="InstanceTree.ExpandAll(true)" align="absmiddle">全部关闭<img src='ImgLib/Collapse.gif' onclick="InstanceTree.ExpandAll(false)" align="absmiddle"><br><br>
<div>
<script language="javascript">
var InstanceTree=new DefineTree('InstanceTree','_blank')
InstanceTree.AddFolder('辽河油田OA')
InstanceTree.AddFolder('合同会签')
InstanceTree.AddFolder('主管')
InstanceTree.AddNode('审批')
InstanceTree.AddNode('审核')
InstanceTree.EndFolder()
InstanceTree.AddNode('相关')
InstanceTree.AddFolder('下发')
InstanceTree.AddNode('科研院所')
InstanceTree.AddNode('设计室')
InstanceTree.AddNode('现场')
InstanceTree.EndFolder()
InstanceTree.EndFolder()
InstanceTree.AddFolder('网上会签')
InstanceTree.AddNode('在线留痕')
InstanceTree.EndFolder()
InstanceTree.AddNode('认证系统')
InstanceTree.EndFolder()
InstanceTree.AddFolder('帮助资料','Http://www.csdn.net',true)
InstanceTree.AddNode('Java资料','Ftp://10.70.151.253')
InstanceTree.EndFolder()
InstanceTree.Init()
</script>
</div>
</body>
</html>