zoukankan      html  css  js  c++  java
  • 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 }   
    示例代码
  • 相关阅读:
    PostgreSQL学习手册(五) 函数和操作符
    数据表的左连接与右连接
    ESX虚拟机文件列表详解
    程序员生存定律-打造属于自己的稀缺性
    C语言字符串处理函数
    托福听力
    DNS map file in windows
    Ubuntu 下安装VNC server
    PostgreSQL 数据库错误状态编号解释[附带列表
    [留学新生须知]新生美国生活常用单词汇总
  • 原文地址:https://www.cnblogs.com/baqiphp/p/5836966.html
Copyright © 2011-2022 走看看