如何根據父級id與級別[行柵格]對行類別數據進行排序

Question

我想基於父級id對子層類別對象進行排序，然後基於級別與顯示它一起顯示父級。

這裏是我的物體看起來像

[{category_id: "168" 
category_level: "1" 
category_name: "Home" 
parent_id: "1"}, 

{category_id: "166" 
category_level: "1" 
category_name: "Living" 
parent_id: "1"}, 

{category_id: "171" 
category_level: "2" 
category_name: "Chairs" 
parent_id: "168"}, 

{category_id: "172" 
category_level: "3" 
category_name: "Single Sofa" 
parent_id: "170"}, 

{category_id: "169" 
category_level: "1" 
category_name: "Patio" 
parent_id: "1"}, 

{category_id: "170" 
category_level: "2" 
category_name: "Sofa" 
parent_id: "166"}, 

] 

** JSON預計輸出**

[{category_id: "168" 
category_level: "1" 
category_name: "Home" 
parent_id: "1"}, 

{category_id: "169" 
category_level: "1" 
category_name: "Patio" 
parent_id: "1"}, 

{category_id: "166" 
category_level: "1" 
category_name: "Living" 
parent_id: "1"}, 


{category_id: "170" 
category_level: "2" 
category_name: "Sofa" 
parent_id: "166"}, 

{category_id: "172" 
category_level: "3" 
category_name: "Single Sofa" 
parent_id: "170"}, 

{category_id: "171" 
category_level: "2" 
category_name: "Chairs" 
parent_id: "168"}] 

輸出應該看起來像

Home 
Patio 
Living 
Living >> Sofa 
Living >> Sofa >> Single Sofa 
Living >> Chairs 

我在這裏使用AG -grid並嘗試通過lodash.js解決它 Here是我的代碼我用來渲染單元格列定義：

var columnDefs = [ 
    {headerName: "", field: "icon", width:52}, 
    {headerName: "Categories",field:"category_name", width:1000, cellRenderer:function(params){ 

     function getParentIndex(pid) 
     { 
     var index = $scope.categories.map(function(el){ 
      return el.category_id; 
     }).indexOf(pid); 
     return index 
     } 

     var val="", parentIndex = getParentIndex(params.data.parent_id); 

     if(parentIndex > -1) 
     { 

     val = $scope.categories[parentIndex].category_name + " >> " +params.data.category_name; 
     var grandParentIndex = getParentIndex($scope.categories[parentIndex].parent_id); 
     if(grandParentIndex > -1) 
     { 
      val = $scope.categories[grandParentIndex].category_name + " >> " + val; 
     } 
     } 
     else { 
     val = params.data.category_name; 
     } 
     return val; 
    }}, 

    {headerName: "", field: "options", width:87, suppressMenu: true, onCellClicked(params){ 
     $scope.modifyOptions(params.data); 
    }, template:"<a class='btn' href='javascript:void(0)'>options</a>" 
    } 
]; 

以上代碼字符串連接良好，但仍需如圖輸出排序。 這是我的lodash.js代碼，很好，但只有一個類別。

var parentId = 1; 
    var sortedList = []; 
    var byParentsIdsList = _.groupBy(scope.categories, "parent_id"); // Create a new array with objects indexed by parentId 

     while (byParentsIdsList[parentId]) { 
      sortedList.push(byParentsIdsList[parentId][0]); 
      parentId = byParentsIdsList[parentId][0].category_id; 
     } 


    scope.categories = sortedList; 

Answer 1

我建議先建立一個樹，然後遍歷分支機構，並建立一個地圖mapping排序結果。

var data = [{ category_id: "168", category_level: "1", category_name: "Home", parent_id: "1" }, { category_id: "166", category_level: "1", category_name: "Living", parent_id: "1" }, { category_id: "171", category_level: "2", category_name: "Chairs", parent_id: "168" }, { category_id: "172", category_level: "3", category_name: "Single Sofa", parent_id: "170" }, { category_id: "169", category_level: "1", category_name: "Patio", parent_id: "1" }, { category_id: "170", category_level: "2", category_name: "Sofa", parent_id: "166" }, ], 
 
    sorted, 
 
    tree = {}, 
 
    map = []; 
 

 
data.forEach(function (a, i) { 
 
    tree[a.category_id] = tree[a.category_id] || {}; 
 
    tree[a.category_id].category_id = a.category_id; 
 
    tree[a.category_id].index = i; 
 
    tree[a.parent_id] = tree[a.parent_id] || {}; 
 
    tree[a.parent_id].children = tree[a.parent_id].children || []; 
 
    tree[a.parent_id].children.push(tree[a.category_id]); 
 
}); 
 

 
function getChildren(o) { 
 
    o.children.forEach(function (a) { 
 
     map.push(a.index); 
 
     a.children && getChildren(a); 
 
    }); 
 
} 
 
getChildren(tree[1]); // assuming it starts with parent_id 1 
 

 
sorted = map.map(function (a) { 
 
    return data[a]; 
 
}); 
 

 
document.write('<pre>' + JSON.stringify(sorted, 0, 4) + '</pre>');