js List<Map> 将偏平化的数组转为树状结构并排序
数据格式:
[
{
"id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59",
"parentId":"6d460008-38f7-479d-b6d1-058ebc17dae3",
"myorder":1,
"name":"任务一"
},
{
"id":"6d460008-38f7-479d-b6d1-058ebc17dae3",
"parentId":"33978737-c722-4339-88a1-a9829dd4bca2",
"myorder":1,
"name":"项目一"
},
{
"id":"33978737-c722-4339-88a1-a9829dd4bca2",
"parentId":"5461ed61-543c-4ea1-9cb5-17b008e093a0",
"myorder":1,
"name":"课题一"
},
{
"id":"5461ed61-543c-4ea1-9cb5-17b008e093a0",
"parentId":"57e06272-eab4-4920-ae6a-25e055374851",
"myorder":1,
"name":"电子教案"
},
{
"id":"8d0723db-9087-4c83-8d0e-ab7f24ddf066",
"parentId":"6d460008-38f7-479d-b6d1-058ebc17dae3",
"name":"任务二",
"myorder":2
}
]
var _data = ${videoList}
// 将偏平化的数组转为树状结构 -- id为根节点
function filterArray(data, id) {
var fa = function(parentid) {
var _array = [];
for (var i = 0; i < data.length; i++) {
var n = data[i];
if (n.parentId === parentid) {
n.children = fa(n.id);
_array.push(n);
}
}
return _array;
}
return fa(id);
}
//根据myorder排序
function _sort(data){
for(var i =0; i<data.length; i++){
_sort(data[i].children)
}
data.sort(function(a,b){
return a.myorder>b.myorder
})
}
var data = filterArray(_data, id)
_sort(data)
js List<Map> 将偏平化的数组转为树状结构并排序的更多相关文章
- js生成动态树状结构及排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 使用Map辅助拼装树状结构,消除递归调用
目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调 ...
- JQuery 树状结构 jQuery-treeview.js 插件
由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- js 每日一更(数组转换成前端更容易解析的树状结构)
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- js中把ajax获取的数据转化成树状结构(并做成多级联动效果)
1.首先通过ajax获取数据,此处省略,直接贴出获取到的数据格式 var arr = [{ id: 1, name: "一级标题", pid: 0 }, { id: 2, name ...
- js实现右下角可关闭最小化div
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...
- js模拟Map对象,实现key---value
js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...
随机推荐
- 给windows共享 目录付于权限
1.点右监 共享给 某用户 2.点属性 -> 安全 加入 特定用户 3.域用户的管理 (选择控制面板/用户管理) 第一个用户是本地账户 第2/3个是域用户
- ubuntu 下配置vim for python
apt-get install vim-gnome apt-get install ctags apt-get install vim-scripts vim-addons install tagli ...
- SELinux Policy Macros
参考:http://selinuxproject.org/page/NB_RefPolicy Directory Macros macro expansion getattr_dir_perms ge ...
- 一般css样式开头公共部分
@charset "utf-8"; /* CSS Document -- skyren */ body { font-family: "微软雅黑", Arial ...
- 使用httperrequest,模拟发送及接收Json请求
使用httpreques\Json-Handle\tcpdump\wireshark工具进行,抓取手机访问网络的包,分析request及response请求,通过httprequester来实现模拟发 ...
- ASP.NET MVC 使用TempData
ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信大家都看过"在ASP.NET页面间传值的方法 ...
- LeetCode OJ 83. Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- 改变vim配色:安装colorscheme【转】
主要有两种方式安装colorscheme: 自行下载colorscheme安装,下载的文件扩展名通常为.vim. 通过安装相关vim的插件获取. 自行下载colorscheme安装 以mac为例,在系 ...
- AJAX程序实验
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 < ...
- linux 配置tomcat服务器
1. 找到tomcat安装包 find / -name apache-tomcat* 2. 解压包 tar zxvf apache-tomcat-7.0.67.tar.gz rpm -ivh j ...