数据格式:

[
{
"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> 将偏平化的数组转为树状结构并排序的更多相关文章

  1. js生成动态树状结构及排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生JS实现树状结构列表

    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...

  3. 使用Map辅助拼装树状结构,消除递归调用

    目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调 ...

  4. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  5. D3.js系列——布局:弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  6. js 每日一更(数组转换成前端更容易解析的树状结构)

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  7. js中把ajax获取的数据转化成树状结构(并做成多级联动效果)

    1.首先通过ajax获取数据,此处省略,直接贴出获取到的数据格式 var arr = [{ id: 1, name: "一级标题", pid: 0 }, { id: 2, name ...

  8. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  9. js模拟Map对象,实现key---value

    js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...

随机推荐

  1. 给windows共享 目录付于权限

    1.点右监 共享给 某用户 2.点属性 -> 安全 加入  特定用户 3.域用户的管理 (选择控制面板/用户管理) 第一个用户是本地账户 第2/3个是域用户

  2. ubuntu 下配置vim for python

    apt-get install vim-gnome apt-get install ctags apt-get install vim-scripts vim-addons install tagli ...

  3. SELinux Policy Macros

    参考:http://selinuxproject.org/page/NB_RefPolicy Directory Macros macro expansion getattr_dir_perms ge ...

  4. 一般css样式开头公共部分

    @charset "utf-8"; /* CSS Document -- skyren */ body { font-family: "微软雅黑", Arial ...

  5. 使用httperrequest,模拟发送及接收Json请求

    使用httpreques\Json-Handle\tcpdump\wireshark工具进行,抓取手机访问网络的包,分析request及response请求,通过httprequester来实现模拟发 ...

  6. ASP.NET MVC 使用TempData

    ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信大家都看过"在ASP.NET页面间传值的方法 ...

  7. 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 ...

  8. 改变vim配色:安装colorscheme【转】

    主要有两种方式安装colorscheme: 自行下载colorscheme安装,下载的文件扩展名通常为.vim. 通过安装相关vim的插件获取. 自行下载colorscheme安装 以mac为例,在系 ...

  9. 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 < ...

  10. linux 配置tomcat服务器

    1. 找到tomcat安装包    find / -name apache-tomcat* 2. 解压包 tar zxvf apache-tomcat-7.0.67.tar.gz rpm -ivh j ...