<!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. 修改Elasticsearch的settings

    解决:Limit of total fields [1000] in index [nginx-access-log] has been exceeded" 的问题 PUT http://1 ...

  2. springboot中使用拦截器、监听器、过滤器

     拦截器.过滤器.监听器在web项目中很常见,这里对springboot中怎么去使用做一个总结. 1. 拦截器(Interceptor)   我们需要对一个类实现HandlerInterceptor接 ...

  3. makefile:n: *** missing separator. Stop

    makefile has a very stupid relation with tabs, all actions of every rule are identified by tabs .... ...

  4. Codeforces 387E George and Cards

    George and Cards 我们找到每个要被删的数字左边和右边第一个比它小的没被删的数字的位置.然后从小到大枚举要被删的数, 求答案. #include<bits/stdc++.h> ...

  5. Python 类的内置方法

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-11-04 # p ...

  6. P1057 传球游戏 dp

    题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:nn个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个 ...

  7. 框架MyBatis

    ByBatis MyBatis是Apache的一个开源项目iBatis,iBatis3.x 正式更名为MyBatis ,代码于2013年11月迁移到Github.它是一个基于Java的持久层框架(连数 ...

  8. json 对象和json字符串

    转载至  http://www.cnblogs.com/cstao110/p/3762056.html JSON字符串与JSON对象的区别 Q:什么是"JSON字符串",什么是&q ...

  9. vim 初识

    1. vim + 文件名.py  :可以创建并打开vim命令模式 2. 命令模式中:shift + z + z :退出vim 3. 命令模式中(h : 左 , l : 右 , j : 下 , k : ...

  10. UDF、UDAF、UDTF函数编写

    一.UDF函数编写 1.步骤 1.继承UDF类 2.重写evalute方法 .继承GenericUDF .实现initialize.evaluate.getDisplayString方法 2.案例 实 ...