<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        var data = [

            { id: 1, title: 'a', pid: 0 },

            { id: 2, title: 'a1', pid: 1 },

            { id: 3, title: 'a11', pid: 2 },

            { id: 4, title: 'a12', pid: 2 },

            { id: 5, title: 'a2', pid: 1 },

            { id: 6, title: 'a21', pid: 5 }

        ];

        function fn(data, pid) {

            var result = [], temp;

            for (var i in data) {

                if (data[i].pid == pid) {

                    result.push(data[i]);

                    temp = fn(data, data[i].id);

                    if (temp.length > 0) {

                        data[i].children = temp;

                    }

                }

            }

            return result;

        }

        //console.log(fn(data, 0));

        Array.prototype.ToTreeJson = function (pid) {

            var result = [], temp;

            for (var i in this) {

                if (this[i].pid == pid) {

                    result.push(this[i]);

                    temp = fn(this, this[i].id);

                    if (temp.length > 0) {

                        this[i].children = temp;

                    }

                }

            }

            return result;

        }

        var p = data.ToTreeJson(0);

    </script>

</body>

</html>

如何用 js 递归输出树型的更多相关文章

  1. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...

  2. 如何用js检测判断时间日期的间距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js递归遍历多维数组并在修改数组的key后返回新的多维数组

    我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. js 递归调用

    js递归调用 function fact(num) { ) { ; } else { ); } } 以下代码可导致出错: var anotherFact = fact; fact = null; al ...

  6. 关于js回调方法 js递归时使用方法

    js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...

  7. 如何用几何画板画V型尖波函数图像

    虽然几何画板没有编程功能,无法直接进行逻辑判断,但通过恰当地运用sgn.trunc等函数可以间接地画出一些特殊函数图像,比如V型尖波函数图像,下面将详细介绍如何用几何画板画V型尖波函数图像. 具体的操 ...

  8. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  9. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

随机推荐

  1. 在Azure中创建asp.net core 应用

    0.前言 在玩转Azure之前首先大家要有Azure账号,或者可以先申请一下微软的账号,然后进行与Azure的关联(azure账号是免费的).但是关联的步骤还是很有意思的,他需要VISA国际信用卡(我 ...

  2. 浅谈MVVM模式和MVP模式——Vue.js向

    浅谈MVVM模式和MVP模式--Vue.js向 传统前端开发的MVP模式 MVP开发模式的理解过程 首先代码分为三层: model层(数据层), presenter层(控制层/业务逻辑相关) view ...

  3. POJ 2378 Tree Cutting 3140 Contestants Division (简单树形dp)

    POJ 2378 Tree Cutting:题意 求删除哪些单点后产生的森林中的每一棵树的大小都小于等于原树大小的一半 #include<cstdio> #include<cstri ...

  4. spoj 375 query on a tree LCT

    这道题是树链剖分的裸题,正在学LCT,用LCT写了,发现LCT代码比树链剖分还短点(但我的LCT跑极限数据用的时间大概是kuangbin大神的树链剖分的1.6倍,所以在spoj上是850ms卡过的). ...

  5. BZOJ 4517: [Sdoi2016]排列计数 错排公式

    4517: [Sdoi2016]排列计数 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4517 Description 求有多少种长度为 ...

  6. 《C# to IL》第三章 选择和循环

    在IL中,标号(label)是一个末尾带有冒号(即:)的名称.它使我们能够从代码的一部分无条件地跳转到另一部分.我们经常在由反编译器生成的IL代码中看到这个标号.例如: IL_0000: ldstr  ...

  7. Pylons Controller里面Session.commit()总是出现rollback

    Pylons Controller里面执行修改数据库表,总是不成功. 然后通过各种手段: 1.js打印返回值 2.不修改表单提交和修改表单提交,结果比较: 3.通过在Pylons Controller ...

  8. HDU 4666 Hyperspace （2013多校7 1001题 最远曼哈顿距离）

    Hyperspace Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Tota ...

  9. TJU 2248. Channel Design 最小树形图

    最小树形图,測模版.... 2248.   Channel Design Time Limit: 1.0 Seconds   Memory Limit: 65536K Total Runs: 2199 ...

  10. DLL Injection and Hooking

    DLL Injection and Hooking http://securityxploded.com/dll-injection-and-hooking.php Three Ways to Inj ...