如何根据父ID级别[ag-grid]对行类别数据进行排序

Question

I'm trying to sort hierarchal category object based on parent id and then based on there level with in that displaying it along with it's parent.

Here is my object look like

[{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 Expected output**

[{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"}]

Output Should look like

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

I'm using here ag-grid and tried solving it by lodash.js Here is my code I used to render cell in column definition:

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>"
  }
];

Above code concatenate string well but still need to sort it as shown in output. Here is my lodash.js code that short well but only with single category.

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

I suggest to build a tree first and then iterate over the branches and build a map for mapping the sorted result.

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