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动态生成树形列表实现思路：使用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树形菜单(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组合，形成树形菜单有如下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实现多级列表（树形菜单）<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列表显⽰树形结构⽬录最近，公司有个新项⽬－⽤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：不怎么写博客，发现写博客真不容易，花了差不多⼀个钟，写得不好⼤家见谅，本⽂对⼤家有⽤的就推荐下！。

没有落叶的秋-博客:/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 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。

JQuery遍历json数组的3种⽅法⼀、使⽤each遍历复制代码代码如下:$(function () {var tbody = "";//------------遍历对象 .each的使⽤-------------//对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使⽤eval函数进⾏转化（否则将得不到Object）。

本⽂不作详细介绍服务器端回调的数据问题，我们将直接⾃定义对象)var obj = [{ "name": "项海军", "password": "123456"}];$("#result").html("------------遍历对象 .each的使⽤-------------");alert(obj); //是个object元素//下⾯使⽤each进⾏遍历$.each(obj, function (n, value) {alert(n + ' ' + value);var trs = "";trs += "<tr><td>" + + "</td> <td>" + value.password + "</td></tr>";tbody += trs;});$("#project").append(tbody);});⼆、jquery遍历解析json对象1：复制代码代码如下:var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];for(var i=0,l=json.length;i<l;i++){for(var key in json[i]){alert(key+':'+json[i][key]);}}三、jquery遍历解析json对象2有如下 json对象：复制代码代码如下:var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” ⼥”,”old”:30};遍历⽅法：复制代码代码如下:for(var p in obj){str = str+obj[p]+',';return str;}PS：这⾥再为⼤家推荐⼏款⽐较实⽤的json在线⼯具供⼤家参考使⽤：在线json压缩/转义⼯具：。

JS和jQuery中ulli遍历获取对应的下⾓标⾸先先看代码:html代码部分:<div id="div"><ul><li>1111111</li><li>2222222</li><li>3333333</li><li>4444444</li><li>5555555</li><li>6666666</li></ul></div>对应的JS的代码部分:var list = document.getElementsByTagName("li");for(var i = 0; i < list.length; i++) {list[i].onclick = function() {console.log(i);}}上⾯当我们在ul li遍历时，点击每⼀个li标签，往往取不到对应的下⾓标，在控制台打印出来的都是最后⼀个的值6。

为什么会产⽣这样的问题呢？解决⽅案⼀:JS⽅法var list = document.getElementsByTagName("li");for(var i = 0; i < list.length; i++) {list[i].index = i;list[i].onclick = function() {console.log(this.index);}}解决⽅案⼆:jquery⽅法$(function() {$('#div').find('li').each(function() {$(this).click(function() {console.log($(this).index());})})})上⾯记得别忘了引⼊jQuery框架。

由简⼊繁实现Jquery树状结构的⽅法（推荐）在项⽬中，我们经常会需要⼀些树状结构的样式来显⽰层级结构等，⽐如下图的样式，之前在学.net的时候可以直接拖个服务端控件过来直接使⽤⾮常⽅便。

但是利⽤Jquery的⼀些插件，也是可以实现这些效果的，⽐如说Jquery.treeview.js插件。

下⾯就直⼊主题，开始从简⼊繁的分析怎么使⽤treeview插件，从已知的知识开始轻松⼊⼿，让树状结构唾⼿可得。

　显⽰树状结构的⼏个实现步骤：⼀、HTML做初始静态原型。

⾸先通过<ul></ul><li></li>展⽰树状基本结构，还原其最初的样⼦：相信学过⼀点HTML的同学都可以实现吧，在“tree.html”中写如下代码：<ul><li>系统管理<ul><li>部门管理</li><li>岗位管理<ul><li>岗位添加</li><li>岗位删除</li></ul></li><li><⽤户管理<ul><li>添加⽤户</li><li>修改⽤户</li></ul></li></ul></li><li>审批流转</li></ul>我们静态的树形结构的草本如下：⼆、加⼊treeview插件库，实现动态树状结构。

在有了基本静态的树状模型以后，我们需要实现⼀个动态的结构，那么，我们的⼤菜就要上场了。

1、⾸先搜索Jquery.treeview.js插件进⾏下载，或直接进⼊下⾯的⽹址进⾏下载插件包：2、下载压缩包解压到相应⽂件夹内，将之间的静态页⾯tree.html放到根⽬录下：3、在tree.html中导⼊js和css⽂件。

JQuery实现动态生成树形菜单有一个需求：菜单导航条需要依据不同的权限动态提取出来。

计划是将功能模块与用户权限之间的关系保持到一个配置表中。

所以功能菜单的话就需要动态提取出来再显示。

借助JQuery框架实现一段动态菜单显示的方案。

一、学习一款它的插件TreeView这个插件能够把无序列表转换成可展开与收缩的Tree。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><script src="/jquery-latest.js"></script><link rel="stylesheet"href="screen.css"type="text/css"/> <link rel="stylesheet"href="jquery.treeview.css"type="text /css"/><script type="text/javascript"src="jquery.treeview.js"></sc ript><script>$(document).ready(function(){$("#example").treeview();});</script></head><body><ul id="example"class="filetree"><li><span class="folder">Folder 1</span><ul><li><span class="file">Item 1.1</span></li></ul></li><li><span class="folder">Folder 2</span><ul><li><span class="folder">Subfolder 2.1</span><ul><li><span class="file">File 2.1.1</span></li><li><span class="file">File 2.1.2</span></li></ul></li><li><span class="file">File 2.2</span></li></ul></li><li class="closed"><span class="folder">Folder 3 (closed at start)</span><ul><li><span class="file">File 3.1</span></li></ul></li><li><span class="file">File 4</span></li></ul></body></html>可以参考：/Plugins/Treeview。

jq 递归遍历tree结构
在jq中，递归遍历tree结构可以使用walk或walk_path函数。

这两个函数都接受一个过滤器作为参数，该过滤器将应用于每个节点。

下面是一个示例，展示如何使用walk函数递归遍历tree结构：
```bash
jq 'walk(if type == "object" then . + {new_key: .new_value} else . end)' ```
在这个示例中，我们使用walk函数递归遍历输入的JSON对象。

对于每个对象节点，我们检查其类型是否为"object"。

如果是，我们向该对象添加一个新的键值对（new_key: new_value）。

否则，我们直接返回当前节点。

如果你想使用walk_path函数，可以按照以下方式进行：
```bash
jq 'walk_path(if type == "object" then . + {new_key: .new_value} else . end)'
```
walk_path函数会遍历整个JSON路径，包括嵌套的数组和对象。

与walk 函数类似，我们使用相同的过滤器来处理每个节点。

请注意，以上示例中的new_key和new_value是占位符，你需要将其替换为你实际需要处理的键和值。

javascript如何⽤递归写⼀个简单的树形结构⽰例现在有⼀个数据，需要你渲染出对应的列表出来：var data = [{"id":1},{"id":2},{"id":3},{"id":4},];var str="<ul>";data.forEach(function(v,i){str+="<li><span>"+v.id+"</span></li>"})str="</ul>"$(doucment).append(str);哼，easy!语罢，⼜是⼀道题飞来!哦，还带了⼉⼦来当帮⼿。

我⼀个循环再⼀个循环，轻松带⾛你们var data2 = [{"id":1,children:[{"id":"child11"},{"id":"child12"}]},{"id":2},{"id":3children:[{"id":"child31"},{"id":"child32"}]},{"id":4},];var str="<ul>";data2.forEach(function(v,i){if(v.children&&v.children.length>0){str+="<li><span>"+v.id+"</span>";str+="<ul>";v.children.forEach(function(value,index){str+="<li><span>"+value.id+"</span>";})str="</ul>";str="</li>";}else{str+="<li><span>"+v.id+"</span></li>"}})str="</ul>"$(doucment).append(str);还有谁？var json=[{name:123,id:1children:[{name:453,id:456,children:[{name:789,id:777,children:[{name:"hahahqqq---qq",id:3232,children:[name:'son',id:"131********"]}]}]},{name:"Cessihshis" , id:12121}]},{name:"啊啊啊11", id:12},];竟然把全家都带来了，看我循环循环再循环⼤法。

一、介绍jQuery 是一个快速、简洁的 JavaScript 库，致力于适应各种不同类型的浏览器。

在实际开发中，经常会遇到需要遍历同辈节点的情况，例如查找某个元素的兄弟节点、父节点的子节点等。

本文将介绍 jQuery 中遍历同辈节点的方法，以及在实际开发中的应用。

二、遍历同辈节点的方法1. siblings() 方法jQuery 中的 siblings() 方法可以获取匹配元素的所有同辈元素。

它返回一个包含所有匹配元素的同辈元素的 jQuery 对象。

例如：```$("ul li").siblings().css("background-color", "yellow");```上面的代码将选取所有 ul 元素中的 li 元素的同辈元素，并将它们的背景色设置为黄色。

2. next() 方法和 prev() 方法next() 方法用于获得匹配元素集合中每个元素紧邻的下一个同辈元素。

prev() 方法则是相反，用于获得匹配元素集合中每个元素紧邻的上一个同辈元素。

例如：```$("ul li").next().css("background-color", "blue");```上面的代码将选取所有 ul 元素中的 li 元素的下一个同辈元素，并将它们的背景色设置为蓝色。

3. nextAll() 方法和 prevAll() 方法nextAll() 方法用于获得匹配元素集合中每个元素之后所有的同辈元素。

prevAll() 方法则是相反，用于获得匹配元素集合中每个元素之前所有的同辈元素。

例如：```$("ul li").nextAll().css("display", "none");```上面的代码将选取所有 ul 元素中的 li 元素的之后所有的同辈元素，并将它们的 display 属性设置为 none。

多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）一、问题研究的背景和意义在Web应用程序开发领域，基于AJAX技术的JavaScript树形控件已经被广泛使用，它用来在Html页面上展现具有层次结构的数据项。

目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件，例如JQuery、Dojo、Yahoo UI、Ext JS等，还有一些独立的树形控件，例如dhtmlxtree等，这些树形控件完美的解决了层次数据的展示问题。

展示离不开数据，树形控件主要利用AJAX技术从服务器端获取数据源，数据源的格式主要包括JSON、XML等，而这些层次数据一般都存储在数据库中。

“无限级树形菜单”，顾名思义，没有级别的限制，它的数据通常来自数据库中的无限级层次数据，这种数据的存储表通常包括id和parentId这两个字段，以此来表示数据之间的层次关系。

现在问题来了，既然树形控件的数据源采用JSON或XML等格式的字符串来组织层次数据，而层次数据又存储在数据库的表中，那么如何建立起树形控件与层次数据之间的关系，换句话说，如何将数据库中的层次数据转换成对应的层次结构的JSON或XML格式的字符串，返回给客户端的JavaScript 树形控件？这就是我们要解决的关键技术问题。

本文将以目前市场上比较火热的Ext JS框架为例，讲述实现无限级树形菜单的方法，该方法同样适用于其它类似的JS树形控件。

Ext JS框架是富客户端开发中出类拔萃的框架之一。

在Ext的UI控件中，树形控件无疑是最为常用的控件之一，它用来实现树形结构的菜单。

TreeNode用来实现静态的树形菜单，AsyncTreeNode用来实现动态的异步加载树形菜单，后者最为常用，它通过接收服务器端返回来的JSON格式的数据，动态生成树形菜单节点。

动态生成树有两种思路：一种是一次性生成全部树节点，另一种是逐级加载树节点（利用AJAX，每次点击节点时查询下一级节点）。

菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接⼝）初学Web端开发，今天是第⼀次将所学做随笔记录，肯定存在多处⽋妥，望⼤家海涵；若有不⾜，望⼤家批评指正。

进实验室后分配到的第⼀个项⽬，需要制作⼀个不确定层级树形菜单的数据接⼝，对于从来没实战编过程的我，存在太多需要学习的地⽅。

开发环境：Atom;语⾔：javascript;其他：nodejs;mysql;express;输⼊：通过sql语句转换出的⼀个个JSON对象，如：其中id为唯⼀编号，parent为其⽗级的id号。

1 [2 {3 "id": 1,4 "name": "111",5 "parent": null,6 "icon": "555,,"7 },8 {9 "id": 2,10 "name": "极地测试菜单2",11 "parent": 1,12 "icon": "/img/002.png"13 },14 {15 "id": 4,16 "name": "555",17 "parent": 2,18 "icon": "88"19 },20 {21 "id": 5,22 "name": "ddd",23 "parent": 2,24 "icon": "555.png"25 },26 {27 "id": 6,28 "name": "666",29 "parent": 4,30 "icon": null31 },32 {33 "id": 7,34 "name": "777",35 "parent": 5,36 "icon": null37 },38 {39 "id": 9,40 "name": "8888",41 "parent": 1,42 "icon": null43 },44 {45 "id": 10,46 "name": "9999",47 "parent": 9,48 "icon": null49 },50 {51 "id": 11,52 "name": "10000",53 "parent": 1,54 "icon": null55 }56 ]输出：树状JSON结构1 {2 "id": 1,3 "name": "111",4 "parent": null,5 "icon": "555,,",6 "sub": [7 {8 "id": 2,9 "name": "极地测试菜单2",10 "parent": 1,11 "icon": "/img/002.png",12 "sub": [13 {14 "id": 4,15 "name": "555",16 "parent": 2,17 "icon": "88",18 "sub": [19 {20 "id": 6,21 "name": "666",22 "parent": 4,23 "icon": null,24 "sub": []25 }26 ]27 },28 {29 "id": 5,30 "name": "ddd",31 "parent": 2,32 "icon": "555.png",33 "sub": [34 {35 "id": 7,36 "name": "777",37 "parent": 5,38 "icon": null,39 "sub": []40 }41 ]42 }43 ]44 },45 {46 "id": 9,47 "name": "8888",48 "parent": 1,49 "icon": null,50 "sub": [51 {52 "id": 10,53 "name": "9999",54 "parent": 9,55 "icon": null,56 "sub": []57 }58 ]59 },60 {61 "id": 11,62 "name": "10000",63 "parent": 1,64 "icon": null,65 "sub": []66 }67 ]68 }即将从mysql中取出的⼀条⼀条JSON数据，按照parent所指向的id号，转变为树桩JSON结构，供AngularJS框架⾃动⽣成树桩菜单。