jQuery递归遍历JSON树,生成对应的ul-li组合,形成树形菜单
递归生成树形菜单
递归⽣成树形菜单递归⽣成树 //调⽤的⽅法 public ActionResult TreeView(){List<TreeModel> ltm = this.GetTrees();string tree = JsonConvert.SerializeObject(ltm).ToString();return Content(tree);}public List<TreeModel> GetTrees(){List<ModuleEntity> listQuery = map.GetList().ToList<ModuleEntity>();List<ModuleEntity> me = listQuery.Where(t => t.F_ParentId == "0").ToList<ModuleEntity>();if (me==null){return null;}List<ModuleEntity> Lme = me.ToList<ModuleEntity>();List<TreeModel> tm = new List<TreeModel>();foreach (ModuleEntity item in Lme){TreeModel tms = new TreeModel();tms.id = item.F_Id; = item.F_FullName;tms.parentId = item.F_ParentId;tms.spread = "true";List<TreeModel> child = new List<TreeModel>();GetTree(listQuery, child, item.F_Id);tms.children = child;tm.Add(tms);}return tm;}//递归获取数据public void GetTree(List<ModuleEntity> list,List<TreeModel> listTree,string parentId){foreach (ModuleEntity item in list){if (item.F_ParentId==parentId){TreeModel tm = new TreeModel();tm.id=item.F_Id;tm.parentId = item.F_ParentId; = item.F_FullName;tm.spread = "true";tm.children = new List<TreeModel>();listTree.Add(tm);GetTree(list,tm.children,tm.id);}}}树形菜单类public class TreeModel{public string id { get; set; }public string parentId { get; set; }public string name { get; set; }public string spread { get; set; }public string href { get; set; }public List<TreeModel> children { get; set; } }。
树形菜单-递归实现逻辑
树形菜单-递归实现逻辑全文共四篇示例，供读者参考第一篇示例：树形菜单是一种常见的界面设计元素，通过树形结构展示信息，使用户能够轻松浏览和选择。
在Web开发中，树形菜单通常用于显示网站的导航菜单、项目结构、文件夹结构等。
实现树形菜单的方法有多种，其中递归是一种常用且有效的实现逻辑。
在本文中，我们将介绍树形菜单的递归实现逻辑，并通过示例代码演示如何使用递归来构建一个动态的树形菜单。
一、什么是递归？在程序设计中，递归是一种解决问题的方法，通过将问题分解成规模较小的子问题来解决整体问题。
递归函数会反复调用自身，直到满足某个终止条件才停止递归。
递归在数据结构和算法中有着广泛的应用，如树形结构的遍历、图的搜索等。
二、树形菜单的数据结构在实现树形菜单之前，首先要明确树形结构的数据表示方法。
通常树形菜单的数据结构可以用对象或数组来表示，每个节点包含一些基本信息和子节点信息。
一个简单的树形菜单数据结构如下所示：```javascript{id: 1,name: 'Root',children: [{ id: 2, name: 'Node 1', children: [] },{ id: 3, name: 'Node 2', children: [{ id: 4, name: 'Node 2-1', children: [] },{ id: 5, name: 'Node 2-2', children: [] }] },{ id: 6, name: 'Node 3', children: [] },]}```在上面的示例中，树形菜单包含了一个根节点和三个子节点，每个节点都包含了id、name和children属性，其中children是一个数组，用于存储子节点信息。
三、递归构建树形菜单接下来，我们将演示如何使用递归来构建一个树形菜单。
[应用]Jquery动态生成树形列表
![[应用]Jquery动态生成树形列表](https://img.taocdn.com/s3/m/ab6e83156d85ec3a87c24028915f804d2b168729.png)
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 = $("<ul></ul>").appendTo(odiv);//*//获取factory节点var f = $(xmldata).find("Factory:first");var lfactory = $("<li></li>").appendTo(ou);var dfactory = $("<div></div>").appendTo(lfactory);var ifactory = $("<img src=''/>").appendTo(dfactory);var ifactory2 = $("<img src=''/>").appendTo(dfactory);var sfactory = $("<span></span>").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 = $("<ul></ul>").appendTo(lfactory);//遍历Area节点$(f).find("Area").each(function() {var larea = $("<li></li>").appendTo(ufactory);var darea = $("<div></div>").appendTo(larea);var iarea = $("<img src=''/>").appendTo(darea);var iarea2 = $("<img src=''/>").appendTo(darea);var sarea = $("<span></span>").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 = $("<ul></ul>").appendTo(larea);//遍历Team节点$(this).find("Team").each(function() {var lteam = $("<li></li>").appendTo(uarea);var dteam = $("<div></div>").appendTo(lteam);var iteam = $("<img src=''/>").appendTo(dteam);var iteam2 = $("<img src=''/>").appendTo(dteam);var steam = $("<span></span>").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 = $("<ul></ul>").appendTo(lteam);//遍历Well节点$(this).find("Well").each(function() {var lwell = $("<li></li>").appendTo(uteam);var dwell = $("<div></div>").appendTo(lwell);var iwell = $("<imgsrc='../Img/treeico/37.png'/>").appendTo(dwell);var swell = $("<span></span>").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", );eRoot.AppendChild(eArea);a.GetTeamList();foreach (Team t in a.TeamList){XmlElement eTeam = xmlDoc.CreateElement("Team");eTeam.SetAttribute("id", t.ID);eTeam.SetAttribute("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",);eTeam.AppendChild(eWell);}}}ResponseXML(xmlDoc.OuterXml);}private void ResponseXML(string xml){Response.ContentType = "text/xml";Response.Charset = "utf-8";Response.Clear();Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");Response.Write(xml);Response.End();}其中：Factory等是自定义的类，GetAreaList等方法是类中自定义的方法，生成xml文档的代码，可以自行编写。
jQuery树形菜单
jQuery树形菜单(1)jquery.treeview/fylsh/blog/item/af6ef8dd16056cadcd116602.htmljQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 从该网站Download得到jquery.treeview.zip文件，里面有需要js、css、images等文件以及Demo，使用时只要在页面中引入jquery.js、jquery.cookie.js、jquery.treeview.js（树形菜单的方法）、jquery.treeview.css即可。
同时保证jquery.treeview.css文件和images文件夹的相对位置，在同一目录下即可接下来构建树形菜单的内容如下：<ul id="example1" class="treeview-black"><li><span>Folder 1</span><ul><li><span >Item 1</span></li></ul></li><li><span >Folder 2</span><ul><li><span >Subfolder 2.1</span><ul id="subfolderadd"><li><span >File 2.1.1</span></li><li><span >File 2.1.2</span></li></ul></li><li><span >File 2.2</span></li></ul></li><li class="closed"><span >Folder 3(closed at start)</span><ul><li><span >File 3.1</span></li></ul></li><li><span >File 4</span></li></ul><div id="treecontrol"><a href="#">收起</a><a href="#">展开</a><a href="#">收起/展开</a></div>最外面的结点作为外结点，每一个<ul></ul>表示一个结点，结点中可以添加很多项，项都是以<li></li>来说明项里面的内容可以是随意的，比如上面用<span></span>来表示结点的内容，你可以用<a>等，当项的内容后面紧接着添加<ul></ul>后，那么该项就变成了父结点，<ul><li>之间不能有html代码，<li>中不能有<li>元素，否则不会显示。
jQuery递归遍历JSON树，生成对应的ul-li组合，形成树形菜单
jQuery递归遍历JSON树，⽣成对应的ul-li组合，形成树形菜单有如下JSON树形菜单数据，需要将其转换为对应的<ul><li>组合View Code1var menulist = {2 "menulist": [3 { "MID": "M001", "MName": "⾸页", "Url": "#", "menulist": "" },4 { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":5 [6 { "MID": "M003", "MName": "新车", "Url": "#", "menulist":7 [8 { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },9 { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }10 ]11 },12 { "MID": "M004", "MName": "⼆⼿车", "Url": "#", "menulist": "" },13 { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }14 ]15 },16 { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }17 ]18 };可使⽤如下⽅法递归得到View Code1 $(function () {2 $("#btn_bianli").click(function () {3var showlist = $("<ul></ul>");4 showall(menulist.menulist, showlist);5 $("#div_menu").append(showlist);6 });7 });89//menu_list为json数据10//parent为要组合成html的容器11function showall(menu_list, parent) {12for (var menu in menu_list) {13//如果有⼦节点，则遍历该⼦节点14if (menu_list[menu].menulist.length > 0) {15//创建⼀个⼦节点li16var li = $("<li></li>");17//将li的⽂本设置好，并马上添加⼀个空⽩的ul⼦节点，并且将这个li添加到⽗亲节点中18 $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);19//将空⽩的ul作为下⼀个递归遍历的⽗亲节点传⼊20 showall(menu_list[menu].menulist, $(li).children().eq(0));21 }22//如果该节点没有⼦节点，则直接将该节点li以及⽂本创建好直接添加到⽗亲节点中23else {24 $("<li></li>").append(menu_list[menu].MName).appendTo(parent);25 }26 }27 }稍微加上⼀点CSS就能形成⽆极菜单了，样式的东西下次再贴。
jQuery实现多级列表（树形菜单）
jQuery实现多级列表（树形菜单）<style>ul{list-style:none;margin:0px;padding:0px;}ul li{margin-left:15px;}ul li a{display:block;height:30px;width:80px;line-height:30px;text-decoration:none;padding-left:15px;}.no{display:none;}.yes{display:block;}.page{background:url("../img/page.png") no-repeat left center;}.plus{background:url("../img/plus.png") no-repeat left center;}.minus{background:url("../img/minus.png") no-repeat left center;}</style><script type="text/javascript" src="../jq/jquery-1.12.4.js"></script><script>$(function(){$("li").each(function(){if($(this).children("ul").size()>0)//判断li下是否有ul列表{//如果有隐藏ul，添加样式$(this).children("ul").eq(0).css("display","none");$(this).children("a").first().addClass("plus");//点击⼀级列表$("a").click(function(){//判断ul是否隐藏if($(this).parent().children("ul").first().css("display")=="none"){$(this).parent().children("ul").first().css("display","block");$(this).removeClass();$(this).addClass("minus");}else{$(this).parent().children("ul").first().css("display","none");$(this).removeClass();$(this).addClass("plus");}})}else{$(this).children("a").eq(0).addClass("page");}})})</script></head><body><ul><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a></li> <li><a href="#">⼀级菜单1</a></li> </ul></li><li><a href="#">⼀级菜单1</a></li> </ul></li><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a></li> <li><a href="#">⼀级菜单1</a></li> </ul></li></ul></body></html>。
C#递归算法－遍历XML文件，以UL列表显示树形结构目录
C#递归算法－遍历XML⽂件，以UL列表显⽰树形结构⽬录最近，公司有个新项⽬－⽤WEB做⼀个财报阅读器供客户使⽤。
项⽬经理⽤Gmail给组员下发需求⽂档，我⼀看，功能需求很详细，但UI设计却只有⽀⾔⽚语。
于是我回复询问下UI需求，得到的回复是：UI设计要看起来⼤⽅，美观，不能和⼀般的阅读器那样古板枯燥，在不改变客户的阅读习惯下，提⾼整体的⽤户体验等之类的话。
这让我想起了之前看到的⼀个QQ表情：这样的UI需求，想必⼤家应该遇到过吧。
话题扯远了，⾔归正题。
阅读器主要的设计是，⽂章⽬录和内容之间的交互。
⽬录是⽐较有层次感的，所以想到了⽤递归来动态⽣成⽬录。
⽬录可以⽤⼀个XML⽂件来保存：<?xml version="1.0" encoding="utf-8" ?><section value="审计报告及合并财务报表"><chapter value="审计报告及合并财务报表B0001A"></chapter><chapter value="审计报告B0101A"></chapter><chapter value="财务报表B0102A"><node value="（⼀）合并资产负债表B0201C"></node><node value="（⼆）资产负债表B0202C"></node><node value="（四）利润表B0204C"></node><node value="（五）合并现⾦流量B0205C"></node><node value="（六）现⾦流量表B0206C"></node><node value="（七）合并所有者权益变动表B0207C"></node><node value="（⼋）所有者权益变动表B0208C"></node></chapter><chapter value="财务报表附注B0103A"><node value="⼀、公司基本情况B0201C"></node><node value="⼆、公司主要会计政策、会计估计和前期差错更正B0202A"><knobble value="（⼀）财务报表的编制基础B0301C"></knobble><knobble value="（⼆）遵循企业会计准则的声明B0302C"></knobble><knobble value="（三）财务报告的批准报出B0303C"></knobble><knobble value="（四）会计期间B0304C"></knobble><knobble value="（五）记账本位币 B0305C"></knobble><knobble value="（六）同⼀控制下和⾮同⼀控制下企业合并的会计处理⽅法B0306A"></knobble><knobble value="（七）合并财务报表的编制⽅法B0307A"></knobble><knobble value="（⼋）现⾦及现⾦等价物的确定标准B0308C"></knobble><knobble value="（九）外币业务和外币报表折算B0309A"></knobble> </node> </chapter></section>然后在后台⽤递归读取XML结点，⽣成HTML显⽰到页⾯即可，实现如下：protected void Page_Load(object sender, EventArgs e){//XDocument doc = XDocument.Load(Server.MapPath("html5Reader/ReaderData.xml"));StringBuilder sb = new StringBuilder();XmlDocument dc = new XmlDocument();string path = Server.MapPath("~/html5Reader/ReaderData.xml");dc.Load(path);XmlNodeList xnl = dc.SelectNodes("section/chapter");sb.Append("<ul>");readxml(xnl, sb);sb.Append("</ul>");this.html.InnerHtml = sb.ToString();}private void readxml(XmlNodeList xmlnl,StringBuilder sb_){foreach (XmlNode xl in xmlnl){if (xl.ChildNodes.Count == 0){sb_.Append("<li><a>" + xl.Attributes["value"].Value + "</a></li>");}else{sb_.Append("<li><a>" + xl.Attributes["value"].Value + "</a><ul>");readxml(xl.ChildNodes, sb_);sb_.Append("</ul></li>");}}}前台很页⾯：<html xmlns="/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1" runat="server"><div id="html" runat="server"></div></form></body></html>运⾏后然后再写下样式表，即可⽣成美观的⽬录！PS：不怎么写博客，发现写博客真不容易，花了差不多⼀个钟，写得不好⼤家见谅，本⽂对⼤家有⽤的就推荐下！。
Jquery遍历json的两种数据结构
没有落叶的秋-博客:/s/blog_8fbeeb59010153d3.html Jquery遍历json的两种数据结构简介什么是JSON？JSON 即JavaScript Object Natation(Java对象表示法)，它是一种轻量级的数据交换格式，非常适合于服务器与JavaScript 的交互。
简而言之，JSON就是JavaScript交换数据的一种格式。
例子如下：{"username":"coolcooldool","password":"1230","usertype":"superadmin" }{"list":[{"password":"1230","username":"coolcooldool"},{"password":" thisis2","username":"okokok"}]}第二种是有数组的情况，我也不用文字表述JSON到底是怎么构成的了，相信长眼睛的人都看懂了。
为什么使用JSON而不是XML？尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。
实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。
和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。