数据格式:

[
{
"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. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  2. FTP、TFTP

      FTP 文件传送协议  (File Transfer Protocol) FTP是因特网上使用得最广泛的文件传送协议. 文件传送协议 FTP (File Transfer Protocol) 是因 ...

  3. 转:jmeter之线程组

    虽然有三个添加线程组的选项,名字不一样, 创建之后,其界面是完全一样的.之前的版本只有一个线程组的名字.现在多一个setUp theread Group 与terDown Thread Group 1 ...

  4. PHP修改记录

    1. Http请求错误--20151123 参考网址:http://www.lvtao.net/dev/php-nginx-uploadfiy.html 是配置问题,修改php.ini文件: uplo ...

  5. 如何在VBS脚本中显示“选择文件对话框”或“选择目录对话框”

    .选择文件[XP操作系统,不能用于Win2000或98],使用“UserAccounts.CommonDialog”对象向用户显示一个标准的“文件打开”对话框 Set objDialog = Crea ...

  6. 导入Excel后绑定GridView实例

    http://blog.csdn.net/loveheronly/article/details/6715552 项目中经常用到导入导出的例子,前面做了导出的例子,现在把导入Excel的数据的例子也把 ...

  7. akka 入门

    http://blog.csdn.net/thkhxm/article/details/40182835 1.首先安装akka的相关包-- http://akka.io/downloads/2.导入依 ...

  8. C++之文件输入输出

    在这里遇见不少的问题,其中的路径问题就是在windows中,\\转义字符才能准确的表示路径 #include <iostream> #include <fstream> #in ...

  9. Entity Framework技巧系列之二 - Tip 6 - 8

    提示6. 如何及何时使用贪婪加载 什么时候你需要使用贪婪加载? 通常在你的程序中你知道对查询到的实体将要进行怎样的操作. 例如,如果你查询一个订单以便为一个客户重新打印,你知道没有组成订单的项目即产品 ...

  10. 找最大重复次数的数和重复次数(C++ Pair)

    Problem A: 第一集 你好,世界冠军 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 265  Solved: 50[Submit][Statu ...