- HTML code
<html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>无标题页</title> <style> .tdstyle1 { height:20px;padding-left:15px;font-weight:bold;color:#586CA9;font-size:14px;border-left:solid 1px white;width:200px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#FFFFFF, EndColorStr=#CFD6FF); } </style></head><body> <form runat="server" id="form1"><script type="text/javascript">function $(id) {return document.getElementById(id)}var html='';//自动加载window.onload = initMenu;//初始化菜单function initMenu(){ var rootn = document.all.menuXML.documentElement; var sd = 1; document.onselectstart = function(){return false;} html='<table cellpadding="0" cellspacing="0">' createMenu(rootn,sd) $("divMenu").innerHTML += html+'</table>'; }function createMenu(thisn,sd){ for(var i = 0; i < thisn.childNodes.length; i++) { var xmlNode = thisn.childNodes[i]; sd = findParent(xmlNode); var parenttd = "td"+sd+i+Math.random(); var childtd = "Menu"+sd+i+Math.random(); if(sd == 1) { if(!xmlNode.hasChildNodes) html += '<tr><td id="'+parenttd+'" class="tdstyle1">'+xmlNode.getAttribute("Name")+'</td></tr>'; else html += '<tr><td id="'+parenttd+'" class="tdstyle1" style="cursor:hand" onclick="openChild(\''+childtd+'\')">'+xmlNode.getAttribute("Name")+'</td></tr>'; } else { var paddingleft = sd * 15; if(!xmlNode.hasChildNodes) html += '<tr><td id="'+parenttd+'" class="tdstyle1" style="padding-left:'+paddingleft+'px">'+xmlNode.getAttribute("Name")+'</td></tr>'; else html += '<tr><td id="'+parenttd+'" class="tdstyle1" style="cursor:hand" onclick="openChild(\''+childtd+'\')" style="padding-left:'+paddingleft+'px">'+xmlNode.getAttribute("Name")+'</td></tr>'; } if(xmlNode.hasChildNodes) { html += '<tr><td id="'+childtd+'" style="display:none"><table cellpadding="0" cellspacing="0">'; createMenu(xmlNode,sd); html+="</table></td></tr>" ; } } }function findParent(xmlNode){ var i=0 while(xmlNode.parentNode) { i++; xmlNode=xmlNode.parentNode; } return i-1;}function openChild(obj){ if($(obj).style.display=="none") $(obj).style.display = "block"; else $(obj).style.display="none";}</script><table border="1" width="200" cellpadding="0" style="font-family:楷体_GB2312" cellspacing="0"><tr><td><div id="divMenu"></div></td></tr></table></form></body></html>
- XML code
xml文件<?xml version="1.0" encoding="utf-8"?><Nodes Name="科研管理" imageUrl="~/images/treeview/xpFolder.gif"> <node Name="科研规划与年度计划" imageUrl="~/images/treeview/xpFolder.gif"> <child Name="科研规划管理" Url="~/PageRedirect.aspx?moduleId=10" imageUrl="~/images/treeview/Segment.gif" /> <child Name="年度计划管理" Url="~/PageRedirect.aspx?moduleId=11" imageUrl="~/images/treeview/Segment.gif" /> <child Name="年度计划统计" Url="~/PageRedirect.aspx?moduleId=12" imageUrl="~/images/treeview/Segment.gif" /> </node> <node Name="课题管理" imageUrl="~/images/treeview/xpFolder.gif"> <child Name="选题管理" Url="~/PageRedirect.aspx?moduleId=27" imageUrl="~/images/treeview/Segment.gif" /> <node Name="校内" imageUrl="~/images/treeview/xpFolder.gif"> <child Name="课题管理" Url="~/PageRedirect.aspx?moduleId=13" imageUrl="~/images/treeview/Segment.gif" /> <child Name="课题进度管理" Url="~/PageRedirect.aspx?moduleId=14" imageUrl="~/images/treeview/Segment.gif" /> <child Name="课题进展情况" Url="~/PageRedirect.aspx?moduleId=48" imageUrl="~/images/treeview/Segment.gif" /> <child Name="课题结项" Url="~/PageRedirect.aspx?moduleId=69" imageUrl="~/images/treeview/Segment.gif" /> </node> <node Name="校外" imageUrl="~/images/treeview/xpFolder.gif"> <child Name="课题管理" Url="~/PageRedirect.aspx?moduleId=39" imageUrl="~/images/treeview/Segment.gif" /> <child Name="课题进度管理" Url="~/PageRedirect.aspx?moduleId=44" imageUrl="~/images/treeview/Segment.gif" /> <child Name="课题结项" Url="~/PageRedirect.aspx?moduleId=70" imageUrl="~/images/treeview/Segment.gif" /> </node> <child Name="课题统计" Url="~/PageRedirect.aspx?moduleId=49" imageUrl="~/images/treeview/Segment.gif" /> </node></Nodes>
- C# code
后台protected void Page_Load(object sender, EventArgs e){ Response.Write("<xml id='menuXML'src='List.xml'></xml>"); }
在写js树的时候如何可以快速获取到当前节点属于第几级
解决后本人可以多加100分
------解决方案--------------------------------------------------------
强
------解决方案--------------------------------------------------------
妈呀,你的代码可真长呀,交个朋友,以后还请多多指教》
我的MSN:shily0612@hotmail.com
------解决方案--------------------------------------------------------
关注,学习
------解决方案--------------------------------------------------------
“在写js树的时候如何可以快速获取到当前节点属于第几级 ”
现在的思路是递归,纯计算不太方便。可以考虑把level层次放到xml源文件中吧
所有逻辑不是很多,没觉得太多优化的地方。
如果吹毛求疵的话,有几个地方:)
1. 字符串拼接虽说在这个应用里不会有效率问题,如果需要优化的话,可以考虑用数组构造stringbuilder
2. createmenu方法用到好几次xmlNode.hasChildNodes方法,是否只需要调用一次,判读赋值后的变量就可以呢
3. findParent方法看的不舒服,i能否初始为-1呢