当前位置: 代码迷 >> ASP.NET >> 找个js高手帮小弟我优化一下js树,顺便学习一下怎么用js写东西,本人写的很菜
  详细解决方案

找个js高手帮小弟我优化一下js树,顺便学习一下怎么用js写东西,本人写的很菜

热度:5407   发布时间:2013-02-25 00:00:00.0
找个js高手帮我优化一下js树,顺便学习一下如何用js写东西,本人写的很菜
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呢
  相关解决方案