`

jquery 读取 json树,并以ul展示

阅读更多

 <script type="text/javascript">       
        var menulist = {
                "menulist": [
                   { "MID": "M001", "MName": "首页", "Url": "TB_inline?height=580&amp;width=800&amp;inlineId=myOnPageContent", "children": "" },
                    { "MID": "M002", "MName": "车辆买卖", "Url": "#", "children":
                       [
                             { "MID": "M003", "MName": "新车", "Url": "#", "children":
                              [
                                   { "MID": "M006", "MName": "奥迪", "Url": "#", "children": "" },
                                 { "MID": "M007", "MName": "别克", "Url": "#", "children": "" }
                               ]
                             },
                             { "MID": "M004", "MName": "二手车", "Url": "#", "children": "" },
                            { "MID": "M005", "MName": "改装车", "Url": "#", "children": "" }
                        ]
                   },
                   { "MID": "M006", "MName": "宠物", "Url": "#", "children": "" }
              ]
            };
       
       
        $(function () {
                 var showlist = $("<ul></ul>");
                 showall(menulist.menulist, showlist);
                 $("#div_menu").append(showlist);
                 alert($("#div_menu").append(showlist).html());
         });

         //menu_list为json数据
        //parent为要组合成html的容器
        function showall(menu_list, parent) {
             for (var menu in menu_list) {
                 //如果有子节点,则遍历该子节点
                 if (menu_list[menu].children.length > 0) {
                    //创建一个子节点li
                     var li = $("<li></li>");
                     //拼接字符:<a href='#'>首页</a>
              //       var link = (menu_list[menu].Url=="#")?$("<a href='"+menu_list[menu].Url+"'>"+menu_list[menu].MName+"</a>"):$("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                     var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                     //将a附加到li里,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
                     $(li).append(link).append("<ul></ul>").appendTo(parent);
                     //将空白的ul作为下一个递归遍历的父亲节点传入
                     showall(menu_list[menu].children, $(li).children().eq(1));
                 }
                 //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
                 else {
                    //拼接字符:<a href='#'>首页</a>
                    var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                    $("<li></li>").append(link).appendTo(parent);
                 }
             }
         }

      
 </script>

 

 

 

 <div  id="div_menu"></div>

 

 

 

分享到:
评论

相关推荐

    jQuery Treeview异步树实现

    在这个异步树实现中,我们专注于如何在jQuery Treeview中集成异步加载功能,特别是与.NET 3.5及以上版本的后端接口协同工作。 异步加载对于大型数据集至关重要,因为它允许用户逐步加载数据,而不是一次性加载所有...

    JQ&VUE;读取json

    在这个场景中,我们关注的是如何使用jQuery(JQ)和Vue.js(VUE)框架来读取JSON数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易于人阅读和编写,同时也易于机器解析和生成,而被广泛...

    jQuery多级折叠展开树形菜单代码

    jQuery插件会读取这些数据,创建对应的DOM元素,并绑定事件处理函数。 在`index.html`中,需要引入jQuery库和自定义的JavaScript文件。通常使用`&lt;script&gt;`标签来完成引入,确保jQuery在自定义脚本之前加载,以避免...

    利用JQuery实现网页左侧树形菜单_MyTreeByJquery.rar

    例如,遍历JSON数组,根据每个菜单项的层级关系生成嵌套的`&lt;ul&gt;`和`&lt;li&gt;`元素,然后用JQuery插入到DOM中。 此外,为了实现菜单的展开与折叠,我们需要维护一个状态变量,记录当前展开的菜单节点。当用户点击一个...

    jquery树

    在Web应用程序中,数据的组织和展示经常需要以树形结构来呈现,这就是jQuery树插件的用武之地。本篇文章将深入探讨jQuery树插件的基本原理、实现方式以及实际应用。 ### 一、jQuery树插件的原理 jQuery树插件主要...

    Jquery读取XML

    总的来说,jQuery提供了方便的API来处理XML数据,结合树形视图库,可以创建出功能丰富的XML数据展示和操作界面。在实际项目中,开发者应根据需求选择合适的工具和方法来实现XML数据的读取和展示。

    ajax,jquery 左侧树形导航效果

    本知识点将深入探讨如何利用AJAX(Asynchronous JavaScript and XML)和jQuery技术来实现这样的效果,并带有一些动态特效,使得用户体验更加丰富。 首先,AJAX 是一种在不刷新整个页面的情况下,与服务器交换数据并...

    jquery ui改造旧版的导航树

    同时,页面加载时读取cookie并恢复树的状态: ```javascript $(document).ready(function() { var treeState = $.cookie("treeview_state"); if (treeState) { $("#treeview").treeview({ collapsed: true, ...

    jQuery+ajax读取并解析XML文件的方法

    本文将详细介绍如何利用jQuery的ajax方法读取XML文件,并对数据进行解析处理的步骤和技巧。 首先,我们得了解什么是XML。XML(Extensible Markup Language,可扩展标记语言)是一种用于存储和传输数据的标记语言,...

    jQuery中使用Ajax获取JSON格式数据示例代码

    描述部分简述了需要读取JSON数据文件的场景,并说明了在jQuery中可以使用Ajax或者$.getJSON()方法来实现数据的获取。描述中还提到,下面将给出一个示例代码,供需要的读者参考。这暗示了读者可以学习如何编写jQuery...

    simpletree完整示例.

    1.代码中包括两种异步树加载,Default.aspx中使用json数据格式返回2.Default3使用兼容性很好的Jquery.simpletree树异步加载树,后台返回&lt;ul&gt;&lt;li&gt; html标记.可以拖拽树.且插件包很小,只包括jquery.simple.tree.css,...

    树形菜单,带右键功能,数据库读取

    在IT领域,树形菜单是一种常见的用户界面元素,它用于展示层次结构的数据,例如文件系统、网站导航或组织架构。这种菜单通常具有可展开/折叠的节点,方便用户浏览和操作。结合右键功能和数据库读取能力,树形菜单...

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识,并...

    catalog.rar

    在描述中提到的“读取JSON数据”是指使用编程语言,如JavaScript,来解析JSON格式的文本并将其转化为可操作的对象。JavaScript内置了JSON对象,提供了`JSON.parse()`方法来将JSON字符串转换为JavaScript对象。例如:...

    jquery.tree-multiselect实例详解

    这个插件基于流行的JavaScript库jQuery构建,提供了一种优雅的方式来展示层次化的选项,使得用户可以逐级选择或取消选择权限项。它的主要优势在于,对于包含大量选项和复杂层级关系的权限分配,它能以更直观的方式...

    jQuery code

    3. **加载皮肤**:当事件触发时,根据用户选择读取JSON数据,并使用`$("#cssLink").attr("href", skinUrl)`或`$("body").addClass(skinClass)`来切换样式表或添加类名,从而改变页面外观。 以上内容只是jQuery庞大...

    java构造多级树结构,支持多根节点

    这可以通过读取数据源(如数据库、JSON文件或数组)并根据关系连接节点来完成。这里可以使用递归方法,遍历数据并为每个节点创建新的`TreeNode`对象,然后将它们链接在一起。 ```java public TreeNode buildTree...

    jQuery树形插件jquery.simpleTree.js用法分析

    例如,`loadTree.php`文件可以从数据库中读取数据,并将其转换成HTML元素,然后再通过jquery.simpleTree.js来生成树形结构。 ### 6. 拖拽与节点操作 jquery.simpleTree.js支持节点的拖拽操作,允许用户通过拖拽来...

    ajax动态生成树 用于jsp

    在`generateTree`函数中,我们需要解析接收到的JSON数据,并构建树形结构。可以使用现成的JavaScript库,如jQuery UI的`treeview`插件,或者利用JavaScript原生方法自行构建DOM。这里以jQuery UI为例: ```...

    json占位符

    在实际操作中,我们可能会使用诸如jQuery的`$.getJSON()`方法或原生的`fetch` API来获取JSON数据。一旦数据加载成功,我们可以遍历JSON对象,将数据插入到HTML模板中。例如,如果从JSON占位符获取了一组用户数据,...

Global site tag (gtag.js) - Google Analytics