<!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. CentOS 6.5下二进制安装 MySQL 5.6

    CentOS 6.5 二进制安装MySQL 5.6 1:查看系统版本 [root@10-4-5-9 mysql]# cat /etc/redhat-release CentOS release 6.5 ...

  2. 谋哥：我跟CEO们都说了啥

    昨天,我和谋天团会员杨过(cdywq7070)--杨总,聊他公司的App,针对女性社交的"闪聊". 杨总增加谋天团,主要是想让我帮他策划推广,我说你让我策划一次.还不如增加谋天团. ...

  3. Commons FileUpLoad 两种上传方式解

    traditional API (传统方式) //上传路径 File file = new File("C:/upload"); //临时文件路径 File tempFile = ...

  4. Apache Ant和Apache Maven的区别

    Apache Ant和Apache Maven的区别 分类: ANT Maven 2013-12-10 18:47 1477人阅读 评论(26) 收藏 举报 ———摘自<maven权威指南> ...

  5. OFBiz：处理nextRequestResponse

    这里的nextRequestResponse是指RequestHandler中doRequest()函数在最后使用的一个变量,doRequest()会依据nextRequestResponse返回不同 ...

  6. 音视频技术 即时通讯SDK

    视频流中的DTS/PTS究竟是什么?      DTS(解码时间戳)和PTS(显示时间戳)各自是解码器进行解码和显示帧时相对于SCR(系统參考)的时间戳.SCR能够理解为解码器应该開始从磁盘读取数据时 ...

  7. linux配置java环境变量(详细) [转]

    一. 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录, 执行命令 ./jdk-6u14-linux-i586.bin 这时会出现一段协议,连继敲回车, ...

  8. Jquery实现无刷新DropDownList联动

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  9. Codeforces Round #256 (Div. 2) C. Painting Fence (搜索 or DP)

    [题目链接]:click here~~ [题目大意]:题意:你面前有宽度为1,高度给定的连续木板,每次能够刷一横排或一竖列,问你至少须要刷几次. Sample Input Input 5 2 2 1 ...

  10. (void)0和0的区别及用法

    (void)0相当于宏NULL,NULL本身的含义为“空”,在c语言代表“不存在.不确定”的含义. 0不能简单的理解为“没有”的意思,在c语言及二进制中,0和1代表的是“一件事物的正反两个方面“,0是 ...