如何用 js 递归输出树型
<!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 递归输出树型的更多相关文章
- 360极速浏览器UA怪异以及如何用js判断360浏览器
本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...
- 如何用js检测判断时间日期的间距
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js递归遍历多维数组并在修改数组的key后返回新的多维数组
我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- js 递归调用
js递归调用 function fact(num) { ) { ; } else { ); } } 以下代码可导致出错: var anotherFact = fact; fact = null; al ...
- 关于js回调方法 js递归时使用方法
js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...
- 如何用几何画板画V型尖波函数图像
虽然几何画板没有编程功能,无法直接进行逻辑判断,但通过恰当地运用sgn.trunc等函数可以间接地画出一些特殊函数图像,比如V型尖波函数图像,下面将详细介绍如何用几何画板画V型尖波函数图像. 具体的操 ...
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
随机推荐
- 无框架完整搭建安卓app及其服务端（一）
技术背景: 我的一个项目做的的是图片处理,用 python 实现图片处理的核心功能后,想部署到安卓app中,但是对于一个对安卓和服务器都一知半解的小白来说要现学的东西太多了. 而实际上,我们的项目要求 ...
- 【atcoder F - Namori】**
F- Namori http://agc004.contest.atcoder.jp/tasks/agc004_f Time limit : 2sec / Memory limit : 256MB S ...
- eclipse 的alt shift a，r 这个快捷键怎么操作 怎么按 eclipse 快捷键 逗号 什么意思
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha eclipse 的alt shift a,r 这个快捷键怎么操作 怎么按 eclipse ...
- input限制中文字数
我们知道input控件有一个maxlength属性可以控制输入字符的长度,但是,它并不会识别是汉字还是其他符号,所以输入maxlength个汉字显然是不符合要求的. 为了实现对带有汉字的输入框长度控制 ...
- [BZOJ5093]图的价值(NTT+第二类Stirling数)
5093: [Lydsy1711月赛]图的价值 Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 250 Solved: 130[Submit][Sta ...
- bzoj 4836: [Lydsy2017年4月月赛]二元运算 -- 分治+FFT
4836: [Lydsy2017年4月月赛]二元运算 Time Limit: 8 Sec Memory Limit: 128 MB Description 定义二元运算 opt 满足 现在给定一 ...
- 数组中找出最小的K个数
题目 给出一个数组,找出K个最小的值 例如给出数组{5,2,4,3,1},给定K值3,则输出结果为{2,3,1} 程序 先给出第一个版本的程序 public static void printKNum ...
- 原生+H5开发之：js交互【location方式】
1. 交互方式总结 1Android与JS通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android ...
- Redis-用思维导图二天搞定Redis用法。
Redis整体面貌 Redis基本数据结构 1.String 1.1 数据结构 long len byte数组长度 long free 可用数组长度 char buff[] 数据内容 1.2 命令 键 ...
- python模块整理29-redis模块
date:20140530auth:jinhttp://github.com/andymccurdy/redis-pyhttps://github.com/andymccurdy/redis-py/b ...