<!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. ArcGIS Add-In调试无法重新生成

    在调试ArcGIS Add-In时,出现错误:无法注册程序集"……\Projects\ArcGISAddIn\ArcGISAddIn\bin\Debug\ArcGISAddIn.dll&qu ...

  2. [Python]datetime常用的几个操作

    #coding: utf-8 ''' 日期相关的操作 ''' from datetime import datetime from datetime import timedelta DATE_FMT ...

  3. HTML5 <input> required

    要求在提交数据之前必须填写该字段,否则会提交不了   <form>          <input type="text" id="msg" ...

  4. web前端开发文档

  5. Linux cmp命令——比较二进制文件（转）

    Linux cmp命令用于比较两个文件是否有差异. 当相互比较的两个文件完全一样时,则该指令不会显示任何信息.若发现有所差异,预设会标示出第一个不同之处的字符和列数编号.若不指定任何文件名称或是所给予 ...

  6. vnc/route/ifconfig 配置

    重启网卡的方法: 1 network 利用root帐户 # service network restart ############################################## ...

  7. jQuery获取select中全部option值

    <select id="language"> <option value="">请选择</option> <optio ...

  8. 我的SpringMvc学习之路之注解

    用注解取代配置文件可降低编程是不必要的麻烦和错误. @Controller  控制器定义 在一个class的上面写上@controller声明此类为控制器类.在配置中*.dispatcher.xml里 ...

  9. 用sp_lock诊断SQL Sever的死锁问题

    找出什么被锁定了 系统的反应迟缓意味着你应该做一些调查了.你的查找最好从测定系统发生锁定的数量和频率开始.如果你的系统环境处理事务性很高的话,这样各个应用程序争夺资源就会很常见,从而引起锁定.解决这些 ...

  10. php中的静态变量

    一.静态变量1.静态变量是只存在于作用域的变量,不过,在函数执行完成以后,这种变量的值不会丢失,也就是说,在下一次调用这个函数时,变量仍会记得原来的值.2.将表达式计算出来的结果付给静态变量是不合法的 ...