<!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:0;}

        div{

            width:auto;

            height:auto;

            line-height:150%;}

        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.min.js"></script>

<script language="javascript">

    //模拟数据

    var jsonData = [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ] ;

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

    function createTree(jsons,pid){

        if(jsons != null){

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

            for(var i=0;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,0) ;

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

        //控制菜单的隐藏显示

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

            $(this).click(function(){

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

            }) ;

        }) ;

    }) ;

</script>

</body>

</html>

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

  1. JS 动态生成JSON对象

    JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; colum ...

  2. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  3. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  4. js动态生成数据的抓取

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  5. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  6. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  7. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  8. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  9. 泛型方法动态生成表达式树 Expression

    public string GetGridJSON(TraderInfo model) { IQueryable<TraderInfo> Temp = db.TraderInfo; if ...

随机推荐

  1. spark基础练习（未完)

    1.filterval rdd = sc.parallelize(List(1,2,3,4,5))val mappedRDD = rdd.map(2*_)mappedRDD.collectval fi ...

  2. gridview--基本的gridview

    GridView 元素距离设定 因为该设定比较简单 防止以后忘记 所以贴 供自己查阅 1. 布局:main.xml <?xml version="1.0" encoding= ...

  3. 转_ _android开发中如何结束所有的activity

    每一个activity都有自己的生命周期,被打开了最终就要被关闭. 四种结束当前的activity方法 Java代码:   //关闭当前activity方法一 finish(); //关闭当前界面方法 ...

  4. C++中为什么构造函数不能是虚函数，析构函数是虚函数

    一, 什么是虚函数? 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数.虚函数的作用,用专业术语来解释就是实现多态性(Polymorphism),多态性是将接口与实现进行分离:用形象的语 ...

  5. 容易导致outofmemoryException内存泄漏异常的编码问题

    1．System.Drawing方面的类使用问题 System.Drawing用到了很多系统的资源和非托管代码,所以使用的时候要特别小心,注意内存泄漏(Memory Leak) 2．new byte[ ...

  6. C++学习19 类的多继承

    在前面的例子中,派生类都只有一个基类,称为单继承.除此之外,C++也支持多继承,即一个派生类可以有两个或多个基类. 多继承容易让代码逻辑复杂.思路混乱,一直备受争议,中小型项目中较少使用,后来的 Ja ...

  7. 软件开发过程文档-cgaowei

    鸡肋——食之无味,弃之可惜”,软件开发过程文档遭遇了鸡肋一样的境遇. 目前敏捷软件开发过程非常流行.相对于软件开发过程文档,敏捷软件开发过程更加重视可运行的程序.关于软件开发过程文档,两个极端都是不可 ...

  8. .NET连接池的配置 【转】

    ADO.Net 在数据库操作过程中默认打开了连接池,不需要再进行手工配置.这个特性可以使数据库操作时效率提高,但也要有相应的代码配合,才能真正提高程序效率. 1.连接字符串 ADO.Net 中的连接池 ...

  9. 使用 FileZilla FTP Client连接Vsftpd在执行LIST命令后提示连接超时

    使用 FileZilla FTP Client 连接 Vsftpd在执行LIST命令后提示连接超时. vi /etc/vsftpd/vsftpd.conf 添加: #开启被动模式 pasv_enabl ...

  10. (easy)LeetCode 217.Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...