js实现无限极分类

转载注明出处！！！

因为要实现部门通讯录，后台传来的数据是直接从数据库里拿的部门表，所以没有层级分类，只有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实现无限极分类

最新文章

热门文章