<!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=gb2312" />

  <title>无标题文档</title>

  <style type="text/css">

      body{

     font-size:14px;

      margin:;}

     div{

     width:auto;

     height:auto;

     line-height:%;}

     ul{

     list-style:none;

     margin-left:-20px;}

    ul li:hover{

     background-color:#DDDDDD;

     color:#FF0000;

     cursor:pointer;}

 </style>

 </head>

 <body>

     <div id="continer"></div>

 </body>

 </html>

 <script language="javascript" src="jquery-1.4.1.min.js"></script>

 <script language="javascript">

     //模拟数据

     var jsonData = [

         {"id":"","name":"父节点1","url":"www.baidu.com","pid":""},

             {"id":"","name":"父节点11","url":"","pid":""},

                 {"id":"","name":"父节点111","url":"","pid":""},

                 {"id":"","name":"父节点112","url":"","pid":""},

             {"id":"","name":"父节点12","url":"","pid":""},

             {"id":"","name":"父节点13","url":"","pid":""},

         {"id":"","name":"父节点4","url":"","pid":""},

             {"id":"","name":"父节点41","url":"","pid":""},

             {"id":"","name":"父节点42","url":"","pid":""},

             {"id":"","name":"父节点43","url":"","pid":""},

         {"id":"","name":"父节点5","url":"","pid":""},

             {"id":"","name":"父节点51","url":"","pid":""},

             {"id":"","name":"父节点52","url":"","pid":""},

             {"id":"","name":"父节点53","url":"","pid":""}

     ] ;

     //主方法，运用递归实现

     function createTree(jsons,pid){

         if(jsons != null){

             var ul = '<ul class="">' ;

             for(var i=;i<jsons.length;i++){

                 if(jsons[i].pid == pid){

                     ul += '<li>' + jsons[i].name + "</li>" ;

                     ul += createTree(jsons,jsons[i].id) ;

                 }

             }

             ul += "</ul>" ;

        }

         return ul ;

     }

     $(function(){

         var ul = createTree(jsonData,) ;

         $("#continer").append(ul) ;

         //控制菜单的隐藏显示

         $("ul[class] li").each(function(){

             $(this).click(function(){

                 $(this).next().toggle() ;

             }) ;

         }) ;

     }) ;

 </script>

//生成效果

JSON动态生成树的更多相关文章

  1. jstree动态生成树

    前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...

  2. DotNetCore跨平台~Json动态序列化属性

    回到目录 Json动态序列化属性,主要为了解决一个大实体,在返回前端时根据需要去序列化,如果实体里的某个属性在任务情况下都不序列化,可以添加[JsonIgnore]特性,这种是全局的过滤,但是更多的情 ...

  3. 基于 el-form 封装一个依赖 json 动态渲染的表单控件

    nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...

  4. 基于 element-plus 封装一个依赖 json 动态渲染的查询控件

    前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件,专 ...

  5. JSON数据生成树——（四）

    1.页面中准备树的div <div class="user_left_tree_info"> <div class="user_left_tree_in ...

  6. Newtonsoft.Json 动态解析 json字符串

    有一个json字符串是动态的,如下面,columns中的数量是不固定的,因此就不能使用反序列化类的方法了: 因此使用这样一种方式,把columns中的所有东西都输出出来: public void Ge ...

  7. dTree 动态生成树

    http://luohua.iteye.com/blog/451453 dTree 主页:http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生 ...

  8. dTree动态生成树(后台处理，简化前台操作)

    dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几分钟之内便能在页面上显示出一颗树来. 它本身给的例子是通过一些静态数据构造树,下面我说一种通过查询的数据动态构造树的方法. 例子 ...

  9. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

随机推荐

  1. css换行缩进

    1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...

  2. 推荐一个在线json数据格式化网站

    json数据非常友好方便的处理: 推荐一个在线json数据格式化网站 http://json.parser.online.fr/

  3. Effective java读书札记第一条之 考虑用静态工厂方法取代构造器

    对于类而言,为了让client获取它自身的一个实例,最经常使用的方法就是提供一个共同拥有的构造器. 另一种放你发,也应该子每一个程序猿的工具箱中占有一席之地.类能够提供一个共同拥有的静态 工厂方法.它 ...

  4. JS 运算、判断优化

    1.二级制操作优于Math 如: //函数向下取整 console.log(Math.floor(8.9)); //二进制向下取整 console.log(8.9>>0); 2.慎用|| ...

  5. shell学习三十二天----read读取一行

    标准输入输出与标准错误输出 标准输入/输出可能是软件工具设计原则里最主要的观念了.他的构想是:程序应有一个数据来源,数据出口(数据要去哪里),以及报告问题的地方.他们分别叫做标准输入,标准输出和标准错 ...

  6. profiler跟踪事件模板文件

    查找执行情况最差的查询. 例如,可以创建一个捕获与 TSQL 和 Stored Procedure 事件类(RPC:Completed 和SQL:BatchCompleted)相关的事件的跟踪.在此跟 ...

  7. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  8. win10 显示详细信息窗格

      win10 显示详细信息窗格 CreateTime--2018年5月26日09点13分 Author:Marydon 1.说明: win10无法像win7那样将详细信息窗格显示在窗口的底部,只能显 ...

  9. EL函数库

    一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...

  10. webqq协议分析之~~~~登陆

    最近好几个新项目积一起了,比较忙,所以博客迟迟未更新,还请各位见谅!下面来继续分析webqq协议,本章将说明如何实现登陆 1:输入QQ号和密码登陆,检测HTTP请求url如下,这是第一次登陆 http ...