如何動態調整角度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>