<!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. 转adb Shell root 权限

    永久root带文件 因为开发需要,我经常会用到adb这个工具(Android Debug Bridge),我们都知道adb shell默认是没有root权限的,修改系统文件就很不方便了,adb pus ...

  2. java实现双向循环链表

    java实现循环链表:http://www.cnblogs.com/lixiaolun/p/4643911.html 在单链表中,查询下一个元素的时间是O(1).查询上一个元素的时间却是O(n). 为 ...

  3. daemon与服务（service）及重启服务的方法

    简单地说,系统为了某些功能必须要提供一些服务(不论是系统本身还是网络方面),这个服务就称为service.而实现这个service的程序我们就称它为daemon.实现某个服务是需要一个daemon在后 ...

  4. 算法笔记_149:图论之桥的应用(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 1310 One-way traffic In a certain town there are n intersections connected ...

  5. Java之JVM调优案例分析与实战(3) - 堆外内存导致的溢出错误

    环境:基于B\S的点子考试系统,为了发现客户端能实时地从服务端接收考试数据,系统使用了逆向AJAX技术(也称Comet或Server Side Push),选用CometD1.1.1作为服务端推送框架 ...

  6. oracle 存储过程 调用动态sql

      oracle 存储过程 调用动态sql CreationTime--2018年8月16日11点25分 Author:Marydon 1.错误实现方式 --开始时间拼接' 00:00:00' V_S ...

  7. 〖Android〗查找Android中的/system/lib中增加的lib文件是否在apk文件中

    #!/bin/bash - #=============================================================================== # # F ...

  8. 一致Hash算法

    一致性哈希算法是分布式系统中经常使用的算法.比方,一个分布式的存储系统,要将数据存储到详细的节点上.假设採用普通的hash方法.将数据映射到详细的节点上,如key%N.key是数据的key.N是机器节 ...

  9. JAVA实现zip压缩需要注意的问题

    近来对院社二维码平台进行2.0升级改造.于昨日踩到一个巨坑.特此记录... 需求源于院社编辑在批量下载二维码的时候,系统后台需要对所要下载的二维码进行重命名和zip打包压缩. 系统测试的时候发现:首次 ...

  10. Hbuilder 常用快捷键

    网上搜了一下,对Hbuider的快捷键 另外还有一些实用的组合键: Alt+T→V (检验语法文档) Alt+L→H (代码历史版本)