如何动态调整角度ui网格Treeview中的高度？

Question

我用角1.5看着树视图的下面的例子：link

在CSS部分它规定了.grid一个固定的高度如下：

.grid { 
    width: 500px; 
    height: 500px; 
} 

是否有动态调整这一种方式根据点击树节点的方式展开高度？

treeview的相关文档是here。但是，在那里显示的示例也有一个固定的高度，我想将其更改为动态高度。

Answer 1

我设法通过实现动态更改容器高度的方法来找到解决方案。在控制器中，我第一次initalize将在稍后JS使用的变量，并使用NG风格的模板：

//=================================================== 
// Initalize height that will be altered later based 
// on tree expand/collapse events 
//=================================================== 
var row_height = 30; // use this to set height everywhere 
$scope.height = row_height; 
$scope.height_px = row_height + 'px'; // used in template with ng-style 

然后同时初始化树视图网格选项，可以row_height参考。我们还添加了逻辑的选项添加或扣除基于rowExpanded和rowCollapsed事件高度：

$scope.gridOptions = { 
    rowHeight: row_height, 
    enableSorting: true, 
    enableFiltering: false, 
    //.....continue other options..... 
    onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 

     // Add container height for row expanded 
     $scope.gridApi.treeBase.on.rowExpanded(null, function(row) { 
      addHeight(row.treeNode.children.length); 
     }); 

     // Deduct container height for row collapsed after considering 
     // all child node expanded state 
     $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) { 
      // get number of children that are already expanded 
      var count = row.treeNode.children.length; 
      for(var i=0; i < row.treeNode.children.length; i++) { 
       count += getChildCount(row.treeNode.children[i]); 
      } 
      deductHeight(count); 
     }); 
    } 
} 

我们再添加所需要的addHeight()，deductHeight()和getChildCount()工作方法来控制：

// Method to add height of container dynamically based on number of rows 
var addHeight = function (num_rows) { 
    $scope.height += num_rows * row_height; 
    $scope.height_px = $scope.height + 'px';    
}; 

// Method to deduct height of container dynamically based on number of rows 
var deductHeight = function (num_rows) { 
    $scope.height -= num_rows * row_height; 
    if($scope.height <= 0) { 
     $scope.height = row_height; 
    } 
    $scope.height_px = $scope.height + 'px';    
}; 

// Method to get count of expanded child rows for a given node (used recursively) 
var getChildCount = function (node) { 
    var count = 0; 
    if(node.state == 'expanded') { 
     // change the state to collapsed for all child nodes 
     node.state = 'collapsed'; 
     count += node.children.length;     
     for(var i=0; i < node.children.length; i++) { 
      count += getChildCount(node.children[i]); 
     } 
     return count; 
    } else { 
     return 0; 
    } 
}; 

请注意，当我们折叠节点时，我们递归地获取节点数。我们还将子节点的状态更改为折叠状态，以便下次正确计算高度。

最后在模板中，我们需要引用$ scope.height_px，它给出了容器的动态高度。我们通过设置ng-style="{ 'height': height_px }"如下做到这一点：我在这之后遇到

<div id="gridTree-1" ui-grid="gridOptions" class="grid" ui-grid-tree-view ui-grid-auto-resize ng-style="{ 'height': height_px }"></div> 

的一个问题是，鼠标的滚动停止时，它被放置在网格的顶部工作。这个问题显然有建议的解决方案here。但是，实际问题涉及禁用ui-grid.js中的滚动功能。在版本3.1.1行2721中读取event.preventDefault();。我不得不将这一行注释掉以便滚动再次正常工作。

Answer 2

要设置手动高度的UI网格树视图，当用户展开或折叠父行

结账onRegisterApi：

var rowtpl = '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'disabled\': true, \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>'; 
$scope.gridOptions = { 
    enableColumnResizing: true, 
    enableSorting: false, 
    enableColumnMenus: false, 
    showTreeExpandNoChildren: false, 
    enableExpandAll:false, 
    enableTreeView: true, 
    rowTemplate: rowtpl, 
    enableFiltering: true, 
    enableRowSelection: true, 
    enableRowHeaderSelection: false, 
    enableHorizontalScrollbar: 0, 
    multiSelect: false, 
    modifierKeysToMultiSelect: false, 
    noUnselect: true, 
    onRegisterApi: function (gridApi) { 

     $scope.gridApi = gridApi; 
    //Row Collapse Set Height 
     $scope.gridApi.treeBase.on.rowCollapsed($scope, function (row) { 

      gridHeight(); 

     }); 
     //Row Expand Set Height 
    $scope.gridApi.treeBase.on.rowExpanded($scope, function (row) { 

      gridHeight(); 

     });}} 

现在看功能gridHeight（），您可以轻松地设置身高

值

function gridHeight() { 
    //timeout function is used due to late updation of $scope.gridApi.core.getVisibleRows() 
    $timeout(function() { 
     // 40: header height 
     // 30: height for each row 


     const visibleRowHeight = 40 + (30 * $scope.gridApi.core.getVisibleRows().length); 
     if (visibleRowHeight > 280) { 
      vm.totalHeight = 280; 
     } 

     else { 
      vm.totalHeight = visibleRowHeight; 
     } 
     //Adjust your height max and min accordingly like i did 

    }, 200); 
} 

查看：

<div id="grid" ui-grid="gridOptions" class="grid" ui-grid-tree-view ui-grid-tree-row-header-buttons ui-grid-cellNav ui-grid-auto-resize ui-grid-resize-columns ui-grid-selection ng-style="{height: vm.totalHeight+'px'}"></div>