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 & ...
随机推荐
- 如何在2016年成为一个更好的Node.js开发者
本文主要讨论一些进行Node.js开发的最佳实践和建议,这些建议不仅仅适合开发者,还适合那些管理与维护Node.js基础架构的工作人员.遵循本文提供的这些建议,能够让你更好的进行日常的开发工作. St ...
- HDU 2855 (矩阵快速幂)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2855 题目大意:求$S(n)=\sum_{k=0}^{n}C_{n}^{k}Fibonacci(k)$ ...
- RequireJS 循环依赖报 模块undefined 处理方案
RequireJS 循环依赖 开始学习使用RequireJS之后做了几个小例子,之后想着把手头的项目也用RequireJS写一遍试试.感觉胜利就在前方了,忽然发现始终卡在一个问题上: 很常见的一个问题 ...
- 不需要了解任何底层知识，就可以汉化！Let`s go!!!
汉化?莫要被这两个字吓到. 其实你也可以汉化,跟着我的步骤来,你也可以进行汉化,Let`s go!!!(大鸟飘过) 这里汉化的是微软企业类库的配置管理工具EntLibConfig.exe.当然,这里的 ...
- NOIP欢乐模拟赛 T1 解题报告
小澳的方阵 (matrix.cpp/c/pas) [题目描述] 小澳最近迷上了考古,他发现秦始皇的兵马俑布局十分有特点,热爱钻研的小澳打算在电脑上还原这个伟大的布局. 他努力钻研,发现秦始皇布置兵马俑 ...
- 【BZOJ】2956: 模积和
题意 求\(\sum_{i=1}^{n} \sum_{j=1}^{m} (n \ mod \ i)(m \ mod \ j)[i \neq j] \ mod \ 19940417\), \((n, m ...
- Android -- 动画效果收获（1）
加载选项菜单 MenuInflater inflater = getMenuInflater(); inflater.inflater(R.menu.menu,menu); An ...
- C#多线程操作界面控件的解决方案（转）
C#中利用委托实现多线程跨线程操作 - 张小鱼 2010-10-22 08:38 在使用VS2005的时候,如果你从非创建这个控件的线程中访问这个控件或者操作这个控件的话就会抛出这个异常.这是微软为了 ...
- 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- JAVA操作MongoDB数据库
1. 首先,下载MongoDB对Java支持的驱动包 驱动包下载地址:https://github.com/mongodb/mongo-java-driver/downloads 2.Java操作Mo ...