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);
}