<!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. iOS核心动画 - CALayer

    大家知道,在iOS中所有的视图都继承自UIView. UIView处理所有的触摸事件和画图. 事实上,UIView所有的渲染和动画是托管给另一个类来负责的,它就是CALayer. 但是,需要记住的是, ...

  2. 修复错误配置/etc/fstab文件导致系统无法正常启动

      1.文件介绍 /etc/fstab这个文件描述系统中各种文件系统的信息,应用程序读取这个文件,然后根据其内容进行自动挂载的工作.作为系统配置文件,fstab通常都位于/etc目录下,它包括了所有分 ...

  3. linux中Oops信息的调试及栈回溯

    Oops 信息来源及格式 Oops 这个单词含义为“惊讶” ,当内核出错时(比如访问非法地址)打印出来的信息被 称为 Oops 信息. Oops 信息包含以下几部分内容. 1 一段文本描述信息. 比如 ...

  4. 环境变量之执行文件路径的变量PATH

    当我们执行一个命令时,系统会依据PATH的设置去PATH定义的每个目录下查寻该命令的可执行文件,如果在PATH定义的目录中含有多个文件名为我们要执行的命令的可执行文件时,那么先查询到的同名命令先被执行 ...

  5. android安装应用程序工具类

    /** * 安装APK文件 *@param APK文件 *Version: *author:YangQuanqing */ private void installAPK(File file){ // ...

  6. mysql数据库创建删除带横杠的数据库名

    mysql> create database d-d; ERROR 1064 (42000): You have an error in your SQL syntax; check the m ...

  7. Android 中 字符串比较

    EditText中getText().toString() 得到的字符串 写法如下if(m_txtAddress.getText().toString()=="") 这样写 是不会 ...

  8. 深入理解MapReduce的架构及原理

    1. MapReduce 定义 Hadoop 中的 MapReduce是一个使用简单的软件框架.基于它写出来的应用程序能够执行在由上千个商用机器组成的大型集群上,并以一种可靠容错式并行处理TB级别的数 ...

  9. XML文件标签名一致,而属性值不同,如何遍历取值写法 摘录

    <EssentialFunctions>      <Qualification description="We Offer" source="AdDe ...

  10. js 字符串拼接 html 累加 html 叠加

    正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...