<script type="text/javascript">
var menulist = {
"menulist": [
{ "MID": "M001", "MName": "首页", "Url": "TB_inline?height=580&width=800&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中集成异步加载功能,特别是与.NET 3.5及以上版本的后端接口协同工作。 异步加载对于大型数据集至关重要,因为它允许用户逐步加载数据,而不是一次性加载所有...
在这个场景中,我们关注的是如何使用jQuery(JQ)和Vue.js(VUE)框架来读取JSON数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易于人阅读和编写,同时也易于机器解析和生成,而被广泛...
jQuery插件会读取这些数据,创建对应的DOM元素,并绑定事件处理函数。 在`index.html`中,需要引入jQuery库和自定义的JavaScript文件。通常使用`<script>`标签来完成引入,确保jQuery在自定义脚本之前加载,以避免...
例如,遍历JSON数组,根据每个菜单项的层级关系生成嵌套的`<ul>`和`<li>`元素,然后用JQuery插入到DOM中。 此外,为了实现菜单的展开与折叠,我们需要维护一个状态变量,记录当前展开的菜单节点。当用户点击一个...
在Web应用程序中,数据的组织和展示经常需要以树形结构来呈现,这就是jQuery树插件的用武之地。本篇文章将深入探讨jQuery树插件的基本原理、实现方式以及实际应用。 ### 一、jQuery树插件的原理 jQuery树插件主要...
总的来说,jQuery提供了方便的API来处理XML数据,结合树形视图库,可以创建出功能丰富的XML数据展示和操作界面。在实际项目中,开发者应根据需求选择合适的工具和方法来实现XML数据的读取和展示。
本知识点将深入探讨如何利用AJAX(Asynchronous JavaScript and XML)和jQuery技术来实现这样的效果,并带有一些动态特效,使得用户体验更加丰富。 首先,AJAX 是一种在不刷新整个页面的情况下,与服务器交换数据并...
同时,页面加载时读取cookie并恢复树的状态: ```javascript $(document).ready(function() { var treeState = $.cookie("treeview_state"); if (treeState) { $("#treeview").treeview({ collapsed: true, ...
本文将详细介绍如何利用jQuery的ajax方法读取XML文件,并对数据进行解析处理的步骤和技巧。 首先,我们得了解什么是XML。XML(Extensible Markup Language,可扩展标记语言)是一种用于存储和传输数据的标记语言,...
描述部分简述了需要读取JSON数据文件的场景,并说明了在jQuery中可以使用Ajax或者$.getJSON()方法来实现数据的获取。描述中还提到,下面将给出一个示例代码,供需要的读者参考。这暗示了读者可以学习如何编写jQuery...
1.代码中包括两种异步树加载,Default.aspx中使用json数据格式返回2.Default3使用兼容性很好的Jquery.simpletree树异步加载树,后台返回<ul><li> html标记.可以拖拽树.且插件包很小,只包括jquery.simple.tree.css,...
在IT领域,树形菜单是一种常见的用户界面元素,它用于展示层次结构的数据,例如文件系统、网站导航或组织架构。这种菜单通常具有可展开/折叠的节点,方便用户浏览和操作。结合右键功能和数据库读取能力,树形菜单...
服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识,并...
在描述中提到的“读取JSON数据”是指使用编程语言,如JavaScript,来解析JSON格式的文本并将其转化为可操作的对象。JavaScript内置了JSON对象,提供了`JSON.parse()`方法来将JSON字符串转换为JavaScript对象。例如:...
3. **加载皮肤**:当事件触发时,根据用户选择读取JSON数据,并使用`$("#cssLink").attr("href", skinUrl)`或`$("body").addClass(skinClass)`来切换样式表或添加类名,从而改变页面外观。 以上内容只是jQuery庞大...
这个插件基于流行的JavaScript库jQuery构建,提供了一种优雅的方式来展示层次化的选项,使得用户可以逐级选择或取消选择权限项。它的主要优势在于,对于包含大量选项和复杂层级关系的权限分配,它能以更直观的方式...
这可以通过读取数据源(如数据库、JSON文件或数组)并根据关系连接节点来完成。这里可以使用递归方法,遍历数据并为每个节点创建新的`TreeNode`对象,然后将它们链接在一起。 ```java public TreeNode buildTree...
例如,`loadTree.php`文件可以从数据库中读取数据,并将其转换成HTML元素,然后再通过jquery.simpleTree.js来生成树形结构。 ### 6. 拖拽与节点操作 jquery.simpleTree.js支持节点的拖拽操作,允许用户通过拖拽来...
在`generateTree`函数中,我们需要解析接收到的JSON数据,并构建树形结构。可以使用现成的JavaScript库,如jQuery UI的`treeview`插件,或者利用JavaScript原生方法自行构建DOM。这里以jQuery UI为例: ```...
在实际操作中,我们可能会使用诸如jQuery的`$.getJSON()`方法或原生的`fetch` API来获取JSON数据。一旦数据加载成功,我们可以遍历JSON对象,将数据插入到HTML模板中。例如,如果从JSON占位符获取了一组用户数据,...