Question

首先请检查我的代码

就像我使用精确指南一样，并遵循Angular ui treeview的所有说明。一切都正常，但我需要一个不同的输出，而不是当前的输出。

目前在我的数据对象上我首先设置了“2627”，其中有一个有两个孩子[3601,3602]，所以第一个看起来对我来说没问题。然后第二行“3226”自动成为第一行“2627”的孩子。但实际上第二行没有任何孩子所以我认为默认情况下它是父母的权利吗？

当我从我的数据对象更改行的顺序（如交换完整行“2627”作为第二行）时，第一行看起来很好，然后所有其他没有子元素的父的其余部分都在“ 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 Grid将没有getResources().getColor(R.color.my_rating_color)属性的任何元素视为具有$$treeLevel的最后一个元素的子元素，直到找到另一个具有$$treeLevel属性的对象，即使该数组是平的。

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

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

Answer 2

我对Angular UI Grid的一些见识

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

希望人们会发现它有用。

解决方案

iris = sns.load_dataset("iris")
setosa = iris.loc[iris.species == "setosa"]
virginica = iris.loc[iris.species == "virginica"]
ax = sns.kdeplot(setosa.sepal_width, setosa.sepal_length,
                 cmap="Reds", shade=True, shade_lowest=False)
ax = sns.kdeplot(virginica.sepal_width, virginica.sepal_length,
                 cmap="Blues", shade=True, shade_lowest=False)

# create a Patch object, here in data coordinates to clip the KDE plots
p = matplotlib.patches.Rectangle(xy=[2.5,5], width=2, height=3, transform=ax.transData, facecolor="xkcd:greenish", alpha=0.3, zorder=-1)
for col in ax.collections:
    col.set_clip_path(p)

# simply for demonstration, show the patch on the axes (optional)    
ax.add_patch(p)

Angular ui grid treeview：所有父级的问题自动作为第一个孩子

2 个答案: