js展开一颗树
Tree View 指令不支持 树结构数据源， 只支持单层数组。（也许是我没发现，人家可以设置） 。我只能把树展开，变成单层数组。然后还要记录已经递归到第一层了。比如这样。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var self = this;
self.list = [
{
"id": 1,
"title": "node1",
"children": [
{
"id": 11,
"title": "node1.1",
"children": [
{
"id": 111,
"title": "node1.1.1"
}
]
},
{
"id": 12,
"title": "node1.2",
"children": []
}
]
},
{
"id": 2,
"title": "node2",
"nodrop": true,
"children": [
{
"id": 21,
"title": "node2.1",
"children": []
},
{
"id": 22,
"title": "node2.2",
"children": []
}
]
},
{
"id": 3,
"title": "node3",
"children": [
{
"id": 31,
"title": "node3.1",
"children": []
}
]
}
];
function flatten (arr,level){
var result = [],
recursion = function (arr,level) {
arr.level = arr.level || level || 0;
//这里用了个巧妙的方法，记录该数组的level。有就用它自己的，没有就判断是不是别人给它的，别人给的一般代表自己是子树。然后给的时候 +1
arr.forEach(function (item) {
item.$$treeLevel = arr.level;
result.push(item);
item.children && recursion(item.children,arr.level + 1);
});
delete arr.level;
};
recursion(arr);
return result;
};
self.arr = flatten(self.list);
console.log(self.arr);
</script>
</body>
</html>
web前端免费学习资料，搜【WEB前端互动交流群】
js展开一颗树的更多相关文章
- 南昌网络赛 Distance on the tree 主席树+树剖 （给一颗树，m次查询ui->vi这条链中边权小于等于ki的边数。）
https://nanti.jisuanke.com/t/38229 题目: 给一颗树,m次查询ui->vi这条链中边权小于等于ki的边数. #include <bits/stdc++.h ...
- js画一棵树
用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> ...
- .net EasyTree显示所级层级（无限级、整层级颗树）的另类写法。非递归
获取整颗树的另类写法.非递归 //获取所有的菜单 List<T_Menu> menu = bll.getMenuByUsesrID("8189a7c1-6f15-4744-b6c ...
- JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- html结合js实现简单的树状目录
最近在学jsp,期末了要做项目,需要用到树状目录,百度了很多,都没有找到想要的答案,最后自己折腾了半天,才搞定. 下面我就来分享一下怎么实现一个简单的树状目录: 1. 下载jquery-treevie ...
- ElementUI如何展开指定Tree树节点
原文:https://blog.csdn.net/gaojie_csdn/article/details/80738488 [问题] 在页面使用ElementUI的时候,想做出一个主动展开树节点的效果 ...
- d3.js之树形折叠树
1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, functio ...
- 康拓展开 & 逆康拓展开 知识总结(树状数组优化)
康拓展开 : 康拓展开,难道他是要飞翔吗?哈哈,当然不是了,康拓具体是哪位大叔,我也不清楚,重要的是 我们需要用到它后面的展开,提到展开,与数学相关的,肯定是一个式子或者一个数进行分解,即 展开. 到 ...
- js实现一棵树的生长
参考链接:https://blog.csdn.net/u010298576/article/details/76609244 HTML网页源码: 1 <!DOCTYPE html> 2 & ...
随机推荐
- 利用ngxtop实时监控nginx的访问情况
关于对nginx web server的实时访问的实时监控问题,我很久之前就想实现的,现在虽有nginx自带的status扩展,但那是全局的,无法细分到vhost,并且提供的metric也很少,加之目 ...
- 5分钟windows wamp php安装phpunit 2015最新安装实践
16:11 2015/11/235分钟windows wamp php安装phpunit 2015最新安装实践我花了一个下午和一个上午的时间注意:步骤中添加环境变量多的时候要保存很多步,知道窗口都自动 ...
- HDU 5877 dfs+ 线段树（或+树状树组）
1.HDU 5877 Weak Pair 2.总结:有多种做法,这里写了dfs+线段树(或+树状树组),还可用主席树或平衡树,但还不会这两个 3.思路:利用dfs遍历子节点,同时对于每个子节点au, ...
- C语言（1）
认知C语言 计算机有很多的语言,现在要学习的C语言便是一种.下面便是一个基本的框架: #include <stdio.h> #include <stdlib.h> int ma ...
- window下 配置gitlab ssh非端口22端口
git config --global user.name "jack" git config --global user.email "jackluo@xxx.com& ...
- nodejs之async异步编程
1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等. 示例: for (v ...
- mysql命令行参数（转）
MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式 -?, --help //显示帮助信息并退出 -I, --help //显示帮助信息并退出 ...
- Sqoop_ 从 hive 导到mysql常遇九问题总结(转)
以前以为版本不同,遇到的问题就不同,后来发现,无论是新版本,还是老版本,遇到的问题大部分都是相同的.下面解决问题的方法仅供借鉴 1.拒绝连接的错误表现是什么?2.表不存在该如何解决?3.null字段填 ...
- Hibernate的性能优化问题笔记
性能优化 1.注意session.clear()的运用.尤其是不断分页循环的情况下. a)在一个大集合中进行遍历,遍历取出数据或者对象 b)java会引起内存泄漏吗?在语法上是不可能出现内存泄露的,因 ...
- Chrome浏览器插件推荐大全
如何下载:http://www.cnplugins.com/devtool/ 提示:下载可能版本过旧,推荐搜索喜爱的插件之后前往官网或者github(编译的时候确保node和npm都是最新的版本).或 ...