js实现无限极分类

转载注明出处!!!

转载注明出处!!!

转载注明出处!!!

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

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

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

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

至此,构树完成。

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

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

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

 1 //无限极分类创建部门列表
 2 //递归创建无限极分类
 3 function createList(list,index)
 4 {
 5     //获取当前index节点的子节点的信息
 6     var tmp = list[index];
 7     var str = ‘‘;
 8     if(tmp)
 9     {
10         str +=‘<ul style="display:none">‘;
11         for(var i = 0; i < tmp.length; i++)
12         {
13             //获取id用来递归
14             var id = tmp[i].id;
15             str += ‘<li class="block border">‘;
16             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>‘;
17             //递归
18             str += createList(list,id);
19             str += ‘</li>‘;
20         }
21         str += ‘</ul>‘;
22     }
23     return str;
24 }
25 //入口函数,dep为部门的信息数组,必须有的是id和parentid
26 function createDownList(dep)
27 {
28     //初始化对象
29     var list = {};
30     var pid = ‘‘;
31     //循环遍历数组,将数据放到对应的parentid下
32     for(var i = 0; i < dep.length; i++)
33     {
34         //获取父节点下标
35         pid = dep[i].parentid;
36         //如果为定义,就定义为空数组
37         if(!list[pid])
38         {
39             list[pid] = [];
40         }
41         //将当前节点信息加入到父元素中
42         list[pid].push(dep[i]);
43     }
44     //排序,其实没有的话也行,我这里是为了确定某一个分类在当前兄弟分类的顺序
45     for (var key in list) {
46       list[key].sort(function(a, b) {
47         return a.order > b.order ? 1 : -1;
48       });
49     }
50     //传入根节点(也就是最顶级分类)的下标
51     return createList(list,0);
52 }   

示例代码

时间: 2024-11-03 21:32:22

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

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

首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的pid是1,而中国的id为1,所以贵州的父节点是中国,至于type字段,可以不用管,只是我自己的项目需要. 可以发现,着写数据在数据表中是无序的,并没有我们想象中的层次结构分明并且可读性很好. 那么,当使用无限极分类之后数据的输出是怎样的呢?如下: 这样就能够很清晰的看出他们的层次结构了,那么这样的效果在thi

夺命雷公狗ThinkPHP项目之----企业网站8之栏目的添加完善(无限极分类的完成)

我们刚才只是完成了添加的一部分,但是我们的上级分类也不能永远都是只有一个死的嘛,所以我们需要对她进行修改: 我们先将add方法里面的数据查出来再说: 然后在模板页进行遍历: 展示效果如下所示: 虽然是出现了,但是没有向我们平常时候见到的无限极分类一样噢,一般比如分类 多多,分类下面的 好多美女啊 是多多的下级分类,那么好多美女啊他前面是有几个空格之类的隔开, 那么我们就需要在model层里面对她进行排序的设置了: <?php namespace Admin\Model; use Think\Mo

PHP无限极分类

概述 ??在实际工作中,经常要用到无限极分类.如导航表等等.到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱,代码很多,那些都不靠谱,还是自己捣鼓捣鼓无限极分类了.下面介绍两种无限极分类:递归,使用引用 数据准备 //初始化原始数据(id=>编号,name=>显示名称,pid=>父级目录id,sort=>排序顺序) $data[1] = array('id'=>'1','name'=>'一级目录A','pid'=>'0','sort'=>'1

php递归无限极分类

递归无限级分类有几种形式,我这里只举例比较常用的三种: 第一种:返回有排序的数组: <?php $data = array( 1 => array( 'id' => 1, 'pid' => 0, 'user_name' => 'one', ), 2 => array( 'id' => 2, 'pid' => 1, 'user_name' => 'two', ), 3 => array( 'id' => 3, 'pid' => 1, '

递归与无限极分类

在函数内部调用本身,且在调用时要做判断. 例:输出1~9 function deeploop(&$i=1){   //引用传值,防止递归时从1开始 echo  $i; $i++; if($i < 10){             //条件判断,防止无限递归 deeploop($i); } } 2.无限极分类原理:每次分类都需要记录它的父级id,如果是顶级,则父级id为0,通过父级id,一层一层往下查. 首先从数据库中取出结果集,把结果集中的pid与顶级的pid开始,然后确定顶级父级.依次往下

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

在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Caching 我理解是在内容中实现,这种方法适用于单服务器的生产环境. 2.a Distributed Cache 分部式缓存实现. 3.Response Cache 这种方式我理解为客户端缓存. 今天我只用了第一种实现方法,内存中缓存,之所以用这种方法我是觉得我这里用缓存的初衷是为了减少访问数据库的次数,

递归的一些应用(二)无限极分类

用递归的方法实现无限极分类 通常我在写项目的时候,在写一些例如商城分类的时候会实现对应分类的上级分类,或者其它项目部门管理的上级部门的时候一般就会用到无限极分类来进行分类 第一步:首先在数据表设计的时候,如果要实现无限极分类,一般我会在数据表多添加一个字段pid,下面我通过一张新建的数据表来说明一下, (1)建表: -- ---------------------------- -- Table structure for pid -- ----------------------------

PHP无限极分类详谈

当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱,代码很多,让我们怎么学习嘛,那些都不靠谱,还是自己捣鼓捣鼓无限极分类了. 比如一个category表:有id, name, pid, sort 就这四个简单的字段,不要太复杂了. id    name          pid      sort1     PHP           0       1

php实现smarty模板无限极分类的方法

本文和大家分享的主要是php中 实现smarty 模板无限极分类相关内容,一起来看看吧,希望对大家 学习php有所帮助. <?php $conn = mysql_connect("localhost","admin","admin"); mysql_select_db("people_shop",$conn); mysql_query("SET NAMES 'UTF-8'"); $class_arr=