Jquery动态生成树形列表.doc

Jquery动态生成树形列表实现思路：使用ajax方式发送请求服务端从数据库中取出结构列表，生成xml文档，回发给客户端客户端接收到xml数据，进行解析，生成列表，并配置列表样式。客户端代码： function GetTreeView(odiv) /odiv为要加载树形控件的div $.ajax( async: false, type: GET, url: ./Page_Ajax/RS_TreeView.aspx, dataType: xml, success: function(xmldata) /新建列表项 var ou = $().appendTo(odiv); /*/获取factory节点 var f = $(xmldata).find(Factory:first); var lfactory = $().appendTo(ou); var dfactory = $().appendTo(lfactory); var ifactory = $().appendTo(dfactory); var ifactory2 = $().appendTo(dfactory); var sfactory = $().appendTo(dfactory); /设置节点属性 $(sfactory).attr(id, $(f).attr(id); $(sfactory).text($(f).attr(name); $(dfactory).width($(sfactory).text().length * 15 + 35);/根据数据长度计算div宽度 $(sfactory).bind(click, function() /绑定点击事件 ); var ufactory = $().appendTo(lfactory); /遍历Area节点 $(f).find(Area).each(function() var larea = $().appendTo(ufactory); var darea = $().appendTo(larea); var iarea = $().appendTo(darea); var iarea2 = $().appendTo(darea); var sarea = $().appendTo(darea); $(sarea).attr(id, $(this).attr(id); $(sarea).text($(this).attr(name); $(darea).width($(sarea).text().length * 15 + 35); $(sarea).bind(click, function() ); var uarea = $().appendTo(larea); /遍历Team节点 $(this).find(Team).each(function() var lteam = $().appendTo(uarea); var dteam = $().appendTo(lteam); var iteam = $().appendTo(dteam); var iteam2 = $().appendTo(dteam); var steam = $().appendTo(dteam); $(steam).attr(id, $(this).attr(id); $(steam).text($(this).attr(name); $(dteam).width($(steam).text().length * 15 + 35); /绑定单击事件 $(steam).bind(click, function() ); var uteam = $().appendTo(lteam); /遍历Well节点 $(this).find(Well).each(function() var lwell = $().appendTo(uteam); var dwell = $().appendTo(lwell); var iwell = $().appendTo(dwell); var swell = $().appendTo(dwell); $(swell).attr(id, $(this).attr(id); $(swell).text($(this).attr(name); $(dwell).width($(swell).text().length * 15 + 35); $(swell).bind(click, function() ); ); ); ); /设置样式 ou.css(padding-left, 15px); ou.css(margin, 0px); ou.css(margin-top, 3px); var ul = $(ou).find(ul); var li = $(ou).find(li); ul.css(padding-left, 20px); ul.css(padding-top, 5px); ul.css(margin-left, 0px); li.css(margin-left, 0px); li.css(list-style-type, none); li.css(cursor, pointer); ou.find(li:has(ul).find(span).css(font-family, 微软雅黑).css(font-size, 14px); ou.find(li:has(ul).find(span).hover( function() $(this).css(color, #0000ff).css(text-decoration, underline); , function() $(this).css(background-color, #ffffff).css(color, #000000).css(text-decoration, none); ); /默认各节点展开，设置图片 ou.find(li:has(ul).find(div img:first).attr(src, ./Img/treeico/minus.gif).css(); ou.find(li:has(ul).find(div img:nth-child(2).attr(src, ./Img/treeico/Open.png); /设置展开收缩事件 li.find(ul).prev().find(img).click(function() $(this).parent().next().toggle(); if ($(this).attr(src) = ./Img/treeico/minus.gif) $(this).attr(src, ./Img/treeico/plus.gif); $(this).next().attr(src, ./Img/treeico/folder.png); else if ($(this).attr(src) = ./Img/treeico/plus.gif) $(this).attr(src, ./Img/treeico/minus.gif); $(this).next().attr(src, ./Img/treeico/Open.png); else if ($(this).attr(src) = ./Img/treeico/Open.png) $(this).prev().attr(src, ./Img/treeico/plus.gif); $(this).attr(src, ./Img/treeico/folder.png); else if ($(this).attr(src) = ./Img/treeico/folder.png) $(this).prev().attr(src, ./Img/treeico/minus.gif); $(this).attr(src, ./Img/treeico/Open.png); ); ); 服务器端代码（RS_TreeView.aspx）： protected void Page_Load(object sender, EventArgs e) XmlDocument xmlDoc = new XmlDocument(); XmlElement eRoot = xmlDoc.CreateElement(Factory); eRoot.SetAttribute(id, factory); eRoot.SetAttribute(name, 采油厂); xmlDoc.AppendChild(eRoot); Factory f = new Factory(); f.GetAreaList(); foreach (Area a in f.AreaList) XmlElement eArea = xmlDoc.CreateElement(Area); eArea.SetAttribute(id, a.ID); eArea.SetAttribute(name, a.Name); eRoot.AppendChild(eArea); a.GetTeamList(); foreach (Team t in a.TeamList) XmlElement eTeam = xmlDoc.CreateElement(Team); eTeam.SetAttribute(id, t.ID); eTeam.SetAttribute(name, t.Name); eArea.AppendChild(eTeam); t.GetWellList(); foreach (Node w in t.WellList) XmlElement eWell = xmlDoc.CreateElement(Well); eWell.SetAttribute(id,w.ID.ToString(); eWell.SetAttribute(name,w.Name); eTeam.AppendChild(eWell); ResponseXML(xmlDoc.OuterXml); private void ResponseXML(string xml) Resp