Angular ui grid treeview : 所有问题 parent 自动作为第一个 child

Question

首先请检查我的代码

就像我使用精确的 guidelines 并遵循 Angular ui 树视图中的所有说明。一切正常，但我需要一个不同的输出而不是当前的输出。

目前根据我的数据 object 我设置了第一个“2627”，其中一个有两个 childs[3601, 3602]，所以第一个对我来说看起来不错。然后第二行“3226”自动归入第一行“2627”的child。但实际上第二行没有任何 child 所以我认为默认情况下它是 parent 对吗？

当我从我的数据中更改行的顺序（比如将整行“2627”交换为第二行）时 object 然后第一行看起来很好，然后是所有其他行 parent 没有 child 元素在“2627”下。

我想你能理解我的担忧，我真正需要的是什么。

如果我遗漏了什么，请告诉我？

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.treeView', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function($scope, $http, $interval, uiGridTreeViewConstants) {
  $scope.gridOptions = {
    enableSorting: true,
    multiSelect: false,
    enableFiltering: true,
    enableRowSelection: true,
    showTreeRowHeader: true,
    enableRowHeaderSelection: true, // Display checkboxes on every row when it's true
    showTreeExpandNoChildren: true,
    columnDefs: [{
      name: 'id',
      width: '30%'
    }, {
      name: 'client_id',
      width: '40%'
    }],
    rowTemplate: "csra-row-template.html"
  };

  var data =

    [{
      "id": 2627,
      "client_id": 182,
      
      "childCSRAs": [{
        "id": 3601,
        "client_id": 182,
        
      }, {
        "id": 3602,
        "client_id": 182,
        
      }]
    }, {
      "id": 3226,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 4223,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 12,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2624,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2619,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 4393,
      "client_id": 182,
      "childCSRAs": []
    }, {
      "id": 2716,
      "client_id": 182,
      
      "childCSRAs": [],
      
    }, {
      "id": 5119,
      "client_id": 182,
      "childCSRAs": [{
        "id": 2620,
        "client_id": 182,
        
      }, {
        "id": 3133,
        "client_id": 182,
       
      }]
    }, {
      "id": 2718,
      "client_id": 182,
      
      "childCSRAs": [{
        "id": 4210,
        "client_id": 182
      }, {
        "id": 2612,
        "client_id": 182,
        
      }]
    }];

  var writeoutNode = function(childArray, currentLevel, dataArray) {

    if (typeof childArray !== 'undefined') {
      childArray.forEach(function(childNode) {
        if (typeof childNode.childCSRAs !== 'undefined') {
          if (childNode.childCSRAs.length > 0) {
            childNode.$$treeLevel = currentLevel;
          }
        }
        dataArray.push(childNode);
        writeoutNode(childNode.childCSRAs, currentLevel + 1, dataArray);
      });
    }
  };
  /*var dataArray = []
  for(i=0; i<=data.length; i++){
    if (typeof childArray !== 'undefined') {
      if(data[i].childCSRAs.length >0){
        data[i].$$treeLevel = 0;
      }
    }
  }*/

  $scope.gridOptions.data = [];
  writeoutNode(data, 0, $scope.gridOptions.data);
}]);

.grid {
   height: 600px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-tree-view class="grid"></div>
</div>
    <script src="app.js"></script>
    <script type="text/ng-template" id="csra-row-template.html">
    <div ng-dblclick="grid.appScope.showInfo(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</script>
  </body>
</html>

Answer 1

UI 网格将任何没有 $$treeLevel 属性的元素视为带有 $$treeLevel 的最后一个元素的子元素，直到另一个带有 $$treeLevel 属性被找到，即使数组是平面的。

您的 writeoutNode 函数仅为具有子元素的元素分配 $$treeLevel 值，当前 ids 2627、5119 和 2718。因此任何其他元素都被视为这些元素的子元素对象。

要显示真实的层次结构，请更改 writeoutNode 函数以相应地为每个元素分配 $$treeLevel 属性。

Answer 2

我对 Angular UI 网格的一些见解

始终为 $$treeLevel 分配一个值，不要将其留空，否则会导致错误的父级或缩进分配。
由于问题的递归性质，我不确定是否有针对所有树类型传递树级别的解决方案，总会有一些小故障。
您需要手动处理缩进。
始终将子节点分配给正确的父节点，然后使用动态 CSS 缩进。
在我的用例中，每个子节点都有其父 ID，这与作者的结构相反。
我使用过 lodash，并全面测试了算法。

希望人们会发现它有用。

解决方案

     function buildFlatArr(childArray, dataArray ){
        childArray.forEach(childNode => {
          let parent = _.find(dataArray,item=>{ return childNode.parentId === item.id });
          childNode.$$treeLevel= (parent) ? parent.$$treeLevel+1 : 0;
          dataArray.push( childNode );
          if (childNode.children && childNode.children.length > 0) {
            buildFlatArr(childNode.children, dataArray);
          }
        });
      };


     let flarArr = buildFlatArr(someArr, []);

Angular ui grid treeview : 所有问题 parent 自动作为第一个 child

Angular ui grid treeview : Issue with all parent is automatically go as a first child

treeview

angularjs

angular-ui

angular-ui-bootstrap