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 & ...
随机推荐
- 被解放的GPU CSS3动画加速
概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...
- ACM +-字符串
+-字符串 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Shiva得到了两个只有加号和减号的字符串,字串长度相同.Shiva一次可以把一个加号和它相邻的减号交换. ...
- BZOJ 1045 题解
1045: [HAOI2008] 糖果传递 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3502 Solved: 1623[Submit][Sta ...
- 【BZOJ】1524: [POI2006]Pal
题意 给出\(n\)个回文串\(s_i(\sum_{i=1}^{n} |s_i| \le 2000000)\)求如下二元组\((i, j)\)的个数\(s_i + s_j\)仍然是回文串. 分析 这道 ...
- Android -- 编辑框更改样式
1. 效果图
- MySQL 服务无法启动。服务没有报告任何错误。
MySQL数据库在升级到5.7版本后,和之前的版本有些不一样,没有data文件夹,我们都知道MySQL数据库文件是保存在data文件夹中的,网上有人说把5.6版本的data文件夹拷贝一个,这种说法听听 ...
- upload控件上传json文件合并的两种方法
方法一: byte[] byte1 = FileUpload1.FileBytes; byte[] byte2 = FileUpload2.FileBytes; byte[] a1 = Encodin ...
- maven的简单说明
groupId: 项目组ID,项目坐标的核心元素. version: 项目版本,项目坐标的核心元素. description: 项目的描述信息. organization: 项目的组织信息.incep ...
- MetaHandler.js：移动端适配各种屏幕
MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...
- select在各个浏览器中的兼容性问题
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同. 下面我们通过对主要CSS属性的支持,打造全兼容select. 对select ...