三十三、UI-Grid Tree View 树状图

原文:tutorial: 215 tree view
在表格中可以创建树状视图,指定哪些数据行是节点,哪些是叶。

请注意,最近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();
  };
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注