转载注明出处!!!

转载注明出处!!!

转载注明出处!!!

因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来做了。

不能说效率多高,只是说能实现了。

其实ACMer或者学过点算法和数据结构的应该知道这其实就是一个树,用数组存罢了,用数组存树的方法相信各位ACMer已经用的不要不要的了,所有并没有什么难度,知道思路就很好写了。

思路:获取到后台传来的数组dep,然后新建一个数组list,将dep遍历一遍,获取到每个节点的parentId,用parentId作为下标插入到list数组里面。

至此,构树完成。

接下来就是遍历了,我是采用递归遍历的,比较简洁,各位大神有什么更好的遍历方法也欢迎分享。

首先获取到根节点(也就是最顶级的那个分类)的下标,然后遍历这个下标中的每个节点的信息,并找出这个节点的id,然后重新传入递归函数即可。

下面是代码实现,注释依旧很清楚。相信应该能看懂,看不懂的多看几遍,照着码一遍应该就懂了。再不懂的,请照着程序走一遍应该就懂了。。要是....就转行吧。

 //无限极分类创建部门列表
//递归创建无限极分类
function createList(list,index)
{
//获取当前index节点的子节点的信息
var tmp = list[index];
var str = '';
if(tmp)
{
str +='<ul style="display:none">';
for(var i = 0; i < tmp.length; i++)
{
//获取id用来递归
var id = tmp[i].id;
str += '<li class="block border">';
str += '<div class="weui_cell" href="javascript:;"><div class="weui_cell_bd weui_cell_primary"><a id = "'+ tmp[i].id+'" href = "http://www.baidu.com">'+tmp[i].name+'</a></div><div></div></div>';
//递归
str += createList(list,id);
str += '</li>';
}
str += '</ul>';
}
return str;
}
//入口函数,dep为部门的信息数组,必须有的是id和parentid
function createDownList(dep)
{
//初始化对象
var list = {};
var pid = '';
//循环遍历数组,将数据放到对应的parentid下
for(var i = 0; i < dep.length; i++)
{
//获取父节点下标
pid = dep[i].parentid;
//如果为定义,就定义为空数组
if(!list[pid])
{
list[pid] = [];
}
//将当前节点信息加入到父元素中
list[pid].push(dep[i]);
}
//排序,其实没有的话也行,我这里是为了确定某一个分类在当前兄弟分类的顺序
for (var key in list) {
list[key].sort(function(a, b) {
return a.order > b.order ? 1 : -1;
});
}
//传入根节点(也就是最顶级分类)的下标
return createList(list,0);
}

示例代码

js实现无限极分类的更多相关文章

  1. 无限极分类的JS实现

    纯JS实现无限极分类 <!DOCTYPE html> <html> <head> <title></title>//引入Jquery < ...

  2. thinkphp5.0无限极分类及格式化输出

    首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...

  3. sqlalchemy tree 树形分类 无限极分类的管理。预排序树,左右值树。sqlalchemy-mptt

    简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...

  4. PHP 商城无限极分类

    无限极分类,用的是递归,在外部调用fen()方法即可 index是刚开始寻找的顶级分类,suo是为了在前端展示的时候缩进 ,$suo=){ 一个数组用来返回的 $t=[]; 这是查询数据库的所有内容 ...

  5. php无限极分类以及递归(thinkphp)

    php无限极分类: 无限极分类重点在于表的设计: 1在model中: class CatModel extends Model{ protected $cat = array(); public fu ...

  6. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二:加入缓存机制

    在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...

  7. PHP无限极分类

      当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...

  8. PHP无限极分类,多种方法|很简单,这里说的很详细,其它地方说的很不好懂

    当你学习php无限极分类的时候,大家都觉得一个字"难"我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究.   到网上一搜php无限极分类,很多,但好多都是一 ...

  9. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现

    今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...

随机推荐

  1. Css 相关资源(本篇不定期更新)

    http://www.tuicool.com/articles/3eaINn---<终于搞懂了CSS实现三角形图标的原理>---☆☆☆☆☆.这篇讲的是css中的如何挤出一个三角形,这个讲的 ...

  2. 小知识 安卓线程和ui

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. Linux RAID卡优化

    200 ? "200px" : this.width)!important;} --> 介绍 我们的生产服务器经常会做raid存储,但是单单做了raid就能保证性能高效和数据 ...

  4. C#设计模式之职责链

    Iron之职责链 需求: "Iron"的建造一直没有停止,现在单个部件是有的,但是在部件从工厂里出来的时候,在组装到一起之前,我们还是非常有必要对部件进行质量检测,或者是其它个方面 ...

  5. Step by Step 安装 BizTalk Server 2009

    原创地址:http://www.cnblogs.com/jfzhu/p/4020444.html 转载请注明出处 演示环境为Windows Server 2008 Enterprise, SQL Se ...

  6. mysql 截取身份证出生日期

    ,) ,) as date), '%m-%d') as 生日 from t_person

  7. 《Hive编程指南》—— 读后总结

    知识图谱

  8. 我所理解的Cocos2d-x

    我所理解的Cocos2d-x(完全基于Cocos2d-x3.0,深度剖析计算机图形学,OpenGL ES及游戏引擎架构,全面提升游戏开发相关知识) 秦春林 著   ISBN 978-7-121-246 ...

  9. iOS-网络基础

    概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微博.微信等,这些应用本身可能采用iOS开发,但是所有的数据支撑都是基于后台网络服务器的.如今,网络编程越来越普遍,孤立的应用通常是没有生命力 ...

  10. Spring学习记录(七)---表达式语言-SpEL

    SpEL---Spring Expression Language:是一个支持运行时查询和操作对象图表达式语言.使用#{...}作为定界符,为bean属性动态赋值提供了便利. ①对于普通的赋值,用Sp ...