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 & ...
随机推荐
- 【原】iOS多线程之线程间通信和线程互斥
线程间通信 1> 线程间通信分为两种 主线程进入子线程(前面的方法都可以) 子线程回到主线程 2> 返回主线程 3> 代码 这个案例的思路是:当我触摸屏幕时,会在子线程加载图片,然后 ...
- Posterior visual bounds retrieval for the Plato framework
Plato is a MVVM compliant 2D on-canvas graphics framework I've been designing and implementing for d ...
- Coder-Strike 2014 - Round 1 D. Giving Awards
题目的意思是 老板给n个人发工资,x欠y的工资,the joy of person x from his brand new money reward will be much less, 老板想避免 ...
- HDU 5876 关于补图的bfs
1.HDU 5876 Sparse Graph 2.总结:好题,把STL都过了一遍 题意:n个点组成的完全图,删去m条边,求点s到其余n-1个点的最短距离. 思路:把点分为两个集合,A为所有没有到达 ...
- POJ 1564 经典dfs
1.POJ 1564 Sum It Up 2.总结: 题意:在n个数里输出所有相加为t的情况. #include<iostream> #include<cstring> #in ...
- Linux 获取设备树源文件（DTS）里描述的资源
Linux 获取设备树源文件(DTS)里的资源 韩大卫@吉林师范大学 在linux使用platform_driver_register() 注册 platform_driver 时, 需要在 plat ...
- JavaScript 页面模板引擎
var TemplateEngine = function(html, options) { var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(i ...
- Linux下多进程编程之exec函数语法及使用实例
exec函数族 1)exec函数族说明 fork()函数用于创建一个子进程,该子进程几乎复制了父进程的全部内容,但是,这个新创建的进程如何执行呢?exec函数族就提供了一个在进程中启动另一个程序执行的 ...
- 实用的Bootstrap的扩展和插件集合
bootstrap插件 http://www.missyuan.net/school/other_2014/other_16472.html http://www.oschina.net/news/5 ...
- 对GitHub的认识
Github创建于2008年被市场研究公司Forrester称作开发者的Facebook .作为开源代码库以及版本控制系统,Github拥有140多万开发者用户.随着越来越多的应用程序转移到了云上,G ...