转载注明出处!!!

转载注明出处!!!

转载注明出处!!!

因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有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. java面向对象_构造器

    构造器(构造方法):是类中定义的方法. 1)常常用于给成员变量赋值: 2)与类同名,没有返回值类型,也不能写void: 3)在创建对象时被自动调用.所以构造方法的访问修饰符要用public,才能被自动 ...

  2. WebClient 数据传输

    数据提交 post  ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...

  3. requireJs--简单的使用方法

    简单使用: <!-- index.html部分 data-main 为入口 --> <script data-main="js/app.js" src=" ...

  4. JQuery之$.ajaxPOST数据

    function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData", c ...

  5. 使用DataList实现数据分页的技术

    今天做网站的时候,用到了分页技术,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们. DataList控件可以按照列表的形式显示数据表中的多行记录,但是被显示的多行记录没有分页功能,使用起来不太方 ...

  6. SQL Server中CROSS APPLY和OUTER APPLY的应用详解

    SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能.新增的APPLY表运算符把右表表达式应用到左表表达式中的每一行.它不像JOIN那样先计算那个表表达式都可以, ...

  7. radio相关

    radio 按钮组, name=”sex”. <input type="radio" name="sex" value="Male"& ...

  8. HTML以及CSS的作用和理念

    首先,在学习之前,这些是必要知道的东西.什么是HTML,什么是CSS 它们有什么用?又能做什么? 了解HTML和CSS的用途,能更有利我们快速,高效的学习它们. 那么,关于这两者,我就用我通俗的语言像 ...

  9. Code First开发系列之管理数据库创建,填充种子数据以及LINQ操作详解

    返回<8天掌握EF的Code First开发>总目录 本篇目录 管理数据库创建 管理数据库连接 管理数据库初始化 填充种子数据 LINQ to Entities详解 什么是LINQ to ...

  10. UI控件(UIPickerView)

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...