<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<title>JS无级树树形菜单</title>
<style type="text/css">
.menuTree{ margin-left:-30px;}
.menuTree div{ padding-left:30px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto;}
.menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid #CCC;}
.menuTree span:hover{ background-color:#e6e6e6; color:#cf0404;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.btn{ height:30px; margin-top:10px; border-bottom:1px solid #CCC;}
</style>
</head>
<body>
<div class="btn">
<input name="" type="button" id="btn_open" value="全部展开" />
<input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="menuTree" class="menuTree"></div>
</body>
</html>
<script type="text/javascript">
var json = [{"name":"*a","list":[
{"name":"**a","url":"#a1"},
{"name":"**aa","list":[
{"name":"***a","url":"#a11"}, {"name":"***aa","list":[ {"name":"****a","url":"#a111"}, {"name":"****aa","list":[ {"name":"*****a","url":"#a1111"}, {"name":"*****aa","url":"#a1112"}
]}
]},
{"name":"***aaa","url":"#a13"},
{"name":"***aaaa","url":"#a14"}
]
},
{"name":"**a","url":"#a3"}
]
},
{"name":"*b","list":[
{"name":"**b","url":"#b1"},
{"name":"**bb","list":[
{"name":"****b","url":"#b111"},
{"name":"****bb","url":"#b112"}
]
},
]
},
{"name":"*c","list":[
{"name":"**c","url":"#c1"},
{"name":"**cc","url":"#c2"}
]
},
{"name":"*d"}
]
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o){
for(var i=0;i<o.length;i++){
var urlstr = "";
try{
if(typeof o[i]["url"] == "undefined"){
urlstr = "<div><span>"+ o[i]["name"] +"</span><ul>";
}else{
urlstr = "<div><span><a href="+ o[i]["url"] +">"+ o[i]["name"] +"</a></span><ul>";
}
str += urlstr;
if(o[i]["list"] != null){
forTree(o[i]["list"]);
}
str += "</ul></div>";
}catch(e){}
}
return str;
}
/*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function(){
//给有子对象的元素加[+-]
$("#menuTree ul").each(function(index, element) {
var ulContent = $(element).html();
var spanContent = $(element).siblings("span").html();
if(ulContent){
$(element).siblings("span").html("[+] " + spanContent)
}
});
$("#menuTree").find("div span").click(function(){
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null){
if(ul.css("display") == "none"){
ul.show(300);
$(this).html("[-] " + spanContent);
}else{
ul.hide(300);
$(this).html("[+] " + spanContent);
}
}
})
}()
/*展开*/
$("#btn_open").click(function(){
$("#menuTree ul").show(300);
curzt("-");
})
/*收缩*/
$("#btn_close").click(function(){
$("#menuTree ul").hide(300);
curzt("+");
})
function curzt(v){
$("#menuTree span").each(function(index, element) {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null){
$(this).html("["+ v +"] " + spanContent);
}
});
}
</script>

  

json获取数据生成动态菜单(转)的更多相关文章

  1. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  2. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  3. php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

    话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                ...

  4. treeTable的使用(ajax异步获取数据,动态渲染treeTable)

    一.展示效果(treetable基本样式https://www.cnblogs.com/shuihanxiao/p/10413454.html) 二.html文件(若一个页面又多个treetable, ...

  5. 5.JasperReports学习笔记5-其它数据生成动态的报表(WEB)

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 一.空数据(Empty Datasources) 就是说JRXML文件里 ...

  6. 在PL/SQL使用游标获取数据及动态SQL

    1.游标概念: 当在PL/SQL块中执行DML(增删改)时,Oracle会为其分配上下文区(Context Area),游标是指向上下文区的指针 2.  游标分类: A.  隐式游标 a.  在PL/ ...

  7. Angularjs 根据数据结构创建动态菜单无限嵌套循环--指令版

    目标:根据数据生成动态菜单,希望可以根据判断是否有子集无限循环下去. 菜单希望的样子是这样的: 菜单数据是这样的: $scope.expanders = [{ title: 'title1', lin ...

  8. SAAS云平台搭建札记: (三) AntDesign + .Net Core WebAPI权限控制、动态菜单的生成

    我们知道,当下最火的前端框架,非蚂蚁金服的AntDesign莫属,这个框架不仅在国内非常有名,在国外GitHub上React前端框架也排名第一.而且这个框架涵盖了React.Vue.Angular等多 ...

  9. WIN 下的超动态菜单(一)

    WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

随机推荐

  1. Log4Net帮助类

    工具类 using System; using System.Diagnostics; using log4net; namespace Trumgu_BI_PF.Util { public clas ...

  2. python之requests 乱七八糟

    1.预配置 import requests ss = requests.Session() ss.headers.update({'user-agent':'Mozilla/5.0 (Windows ...

  3. C# 之 串口数据侦听的实现

    当需要编程操纵硬件时会遇到过这样的问题,就是通过串口来接收硬件发来的数据,或是通过串口向硬件发送某种格式的命令.在C#平台上,可以通过 System.IO.Ports 命名空间下的SerialPort ...

  4. python基础——dict和set(字典和集合)

    1.dict:pop(),get(),in,{} >>> dicttest = {'marry':34,'jucy':56} --初始化>>> dicttest{' ...

  5. vsftp为不同用户设置不同的ftp的根目录

    需求 要求ftp登录后的根目录是/var/test/,但是又不能影响其他用户的登录路径,因为有些程序是直接在根目录进行操作的,而没有目录切换的过程.操作过程新建用户 useradd test1user ...

  6. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-5项目数据库操作封装操作-EF框架

    EF框架有三种基本的方式:DB First(数据库优先),Model First(模型优先),Code First(代码优先). Entity Framework4.1之前EF支持“Database  ...

  7. python--装饰器2--理解

    一.装饰无参函数①.原函数target为无参函数②.装饰函数的内置函数也必须要是无参函数③.运行原理相当于:target()=decorator(target)()---->最后的()相当于执行 ...

  8. Redis闪退解决办法

    复杂办法! cmd 进入命令,cd进入redis文件 输入:redis-server.exe redis.windows.conf,手动开启! 简单办法,删除重新下载! 不确定办法如下 1.在解压的r ...

  9. 00-JAVA语法基础--课后作业

    题目:像二柱子那样,花20分钟写一个能自动生成30道小学四则运算题目的“软件”. package 课堂作业1; import java.util.Random; import java.util.Sc ...

  10. 003.Keepalived搭建LVS高可用集群

    一 基础环境 1.1 IP规划 OS:CentOS 6.8 64位 节点类型 IP规划 主机名 类型 主 Director Server eth0:172.24.8.10 DR1 公共IP eth1: ...