<!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. wc 统计行数 字数

    Linux统计文件行数 2011-07-17 17:32 by 依水间, 168255 阅读, 4 评论, 收藏, 编辑 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数. ...

  2. iOS 9音频应用播放音频之第一个ios9音频实例

    iOS 9音频应用播放音频之第一个ios9音频实例 第一个ios9音频实例 为了让开发者可以对上面的内容有更加深入的了解,本节将实现播放音频的第一个实例.在此实例中会涉及到项目的创建.界面设计.关联以 ...

  3. Scrapy基础------css选择器基础

    基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...

  4. java8新特性——接口中的静态方法与默认方法

    以前我们知道,接口中的方法必须时抽象方法,而从 java8 开始接口中也可以有方法的实现了,叫做默认方法. 一 .默认方法(default修饰) 在 java8 中,因为存在函数式接口,一个接口中只能 ...

  5. [BZOJ3583]杰杰的女性朋友(矩阵快速幂)

    杰杰的女性朋友 时间限制:10s      空间限制:256MB 题目描述 杰杰是魔法界的一名传奇人物.他对魔法具有深刻的洞察力,惊人的领悟力,以及令人叹为观止的创造力.自从他从事魔法竞赛以来,短短几 ...

  6. bzoj1001: [BeiJing2006]狼抓兔子 -- 最小割

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MB Description 现在小朋友们最喜欢的"喜羊羊与灰太狼 ...

  7. wampserver -- 取消PHP页面Warning和Notice级别的报错

    Learn from:http://yige.org/p/91 一般遇到这样的问题,有两个方法:1.如果有服务器权限,直接把服务器上的php.ini的配置改了,改成不输出Warning和Notice级 ...

  8. PHP生成短网地址

    思路: 1)将长网址md5生成32位签名串,分为4段, 每段8个字节; 2)对这四段循环处理, 取8个字节, 将他看成16进制串与0x3fffffff(30位1)与操作, 即超过30位的忽略处理; 3 ...

  9. 51nod 1035 最长的循环节 数学

    1035 最长的循环节 题目连接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1035 Description 正整 ...

  10. Unity快捷键总结

    Shift+Alt+A  物体快速激活 Ctrl+P 开始 Ctrl+Shift+P 暂停 Ctrl+B  编译并运行 Z  Pivot/Center切换 X Local/Global切换