数据格式:

[
{
"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. 1010 Robot Motion

    Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...

  2. @ResponseBody返回json时,json数据丢失或者报错

    现象: 1.报错:There is a cycle in the hierarchy! 2.返回至前台的json不完整,字段丢失. 错误原因: eg:entity1的属性有list<entiti ...

  3. 浅谈C/C++结构体内存分配问题

    .wiz-todo, .wiz-todo-img {width: 16px; height: 16px; cursor: default; padding: 0 10px 0 2px; vertica ...

  4. windows禅道环境搭建

    zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html   搭建环境需要下载两个文件 1) ...

  5. 嵌套json

    今天一个客户问怎样把表中相同键值对应的文本按照一定顺序拼接起来.如果使用SQL实现将非常麻烦,并且效率低下.GP4.1以后提供了一个函数array_agg可以方便快捷,高效的实现该功能 比如原始查询是 ...

  6. weaver_oa

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 你需要简单了解JVM中的内存长什么样子

    下面有关JVM内存,说法错误的是? 1.程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,是线程隔离的 2.Java方法执行内存模型,用于存储局部变量,操作数栈,动态链接 ...

  8. java返回json数据日期为一串数字字符串 js 转义

    var time = "2514484555"; //这只是事例,并不是实际的数据 function timeToString(time) { var datetime = new ...

  9. button的action属性如果有参数,必须加“:”

    比如: [bt addTarget:self action:@selector(shareButtonClickHandler:) …… 后面未写完 一开始我没加,就报错.

  10. The project target (Android 6.0) was not properly loaded或者The rendering target (Android 6.0) is still loading.

    第一步:在project上右键选择Properties,然后选择Android, 然后在Project Build Target那里选择其他的Target试试: 第二步: 我选了6.0之后,就有菜单可 ...