在表格中可以创建树状视图，指定哪些数据行是节点，哪些是叶。
请注意，最近treeView和分组有重大更改，大部分逻辑合并到treeBase模块中。 这意味着您可能需要在代码中包含treeBase模块，并且某些事件和方法已移至grid.api.treeBase而不是grid.api.treeView。
api文档中提供了treeView功能的文档，包括treeView本身和treeBase文档中的共享函数。 特别是：
- treeBase columnDef
- treeView gridOptions and treeBase gridOptions
- treeView publicApi and treeBase publicApi
树结构本身记录在treeBase中。 在数据中，通过在给定行上设置属性$$treeLevel来设置节点。 级别从0开始，随着数据向下移动而增加。
可以通过rowExpanded事件逐条侦听加载数据。 然后，还可以将其他数据拼接到指定的数据数组中。
Treeview允许排序，并将其实现为递归树排序 – 它对树的每个节点的子节点进行排序。
Treeview所有行（节点和叶子）都可以过滤，并确保任何可见行的所有父项也是可见的。 请注意，过滤不会更改展开/折叠状态，仍需要展开节点以获取已过滤的行。
Treeview包括聚合逻辑，通过在columnDef上设置聚合属性来实现。 聚合属性记录在columnDef中。 有关更多详细信息，请参阅 complex trees 。
TreeView还正在开发中，仍然是内测版，但是已经包含在分发文件中可以使用。 值得注意的是： – 在加载其他数据的同时显示沙漏或图标会很好，同时也意味着表格不知道是否正在添加其他数据
需要注意的选项包括：
- treeIndent：随着树级别变深，展开按钮缩进的像素值（默认为10）。 较大的值看起来更好
- treeRowHeaderBaseWidth：树行标题的基本宽度（默认为30）
- showTreeExpandNoChildren：默认为true。 即使没有子项也显示+，也允许你动态加载子项。 如果设置为false，如果没有子项，则不会有+
为了获得更好的性能，您可以选择加载ui-grid.core.js和特定的功能文件：
<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.tree-base.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.tree-view.min.js"></script>
Example
在此示例中，大多数数据在初始页面加载时加载。 然而，Guerrero Lopez下的节点仅在监听该行时才加载。 它们有2秒的延迟来模拟从服务器加载。
- index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.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/docs/grunt-scripts/lodash.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<button id="expandAll" type="button" class="btn btn-success" ng-click="expandAll()">Expand All</button>
<button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="toggleRow(0)">Toggle First Row</button>
<button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="toggleRow(1)">Toggle Second Row</button>
<button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="toggleExpandNoChildren()">Toggle Expand No Children</button>
<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>
</div>
</body>
</html>
- main.css
.grid {
width: 500px;
height: 400px;
}
- app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.treeView' ]);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
showTreeExpandNoChildren: true,
columnDefs: [
{ name: 'name', width: '30%' },
{ name: 'gender', width: '20%' },
{ name: 'age', width: '20%' },
{ name: 'company', width: '25%' },
{ name: 'state', width: '35%' },
{ name: 'balance', width: '25%', cellFilter: 'currency' }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
$interval(function() {
$scope.gridOptions.data.splice(51,0,
{name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
{name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
);
$scope.nodeLoaded = true;
}, 2000, 1);
}
});
}
};
$http.get('http://ui-grid.info/data/500_complex.json')
.then(function(response) {
var data = response.data;
for ( var i = 0; i < data.length; i++ ){
data[i].state = data[i].address.state;
data[i].balance = Number( data[i].balance.slice(1).replace(/,/,'') );
}
data[0].$$treeLevel = 0;
data[1].$$treeLevel = 1;
data[10].$$treeLevel = 1;
data[11].$$treeLevel = 1;
data[20].$$treeLevel = 0;
data[25].$$treeLevel = 1;
data[50].$$treeLevel = 0;
data[51].$$treeLevel = 0;
$scope.gridOptions.data = data;
});
$scope.expandAll = function(){
$scope.gridApi.treeBase.expandAllRows();
};
$scope.toggleRow = function( rowNum ){
$scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
};
$scope.toggleExpandNoChildren = function(){
$scope.gridOptions.showTreeExpandNoChildren = !$scope.gridOptions.showTreeExpandNoChildren;
$scope.gridApi.grid.refresh();
};
}]);
