如何在 Angular ui-grid Treeview 中动态调整高度? [英] How to dynamically adjust height in Angular ui-grid Treeview?

问题描述

我正在查看以下使用 Angular 1.5 的树视图示例:link

I was looking at the following example of treeview using Angular 1.5: link

在 css 部分，它为 .grid 指定了一个固定的高度，如下所示:

In the css section it specifies a fixed height for .grid as follows:

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

有没有办法根据树节点的点击展开来动态调整这个高度?

Is there a way of dynamically adjusting this height according to how a tree node is clicked to expand?

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

The relevant documentation for treeview is here. However, the example shown there also has a fixed height, which I would like to change to dynamic height.

推荐答案

设置用户展开或折叠父行时 UI-Grid Tree View 的手动高度

结帐 onRegisterApi:

checkout 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()，您可以在其中轻松设置高度值

Now look at function gridHeight() where you can easily set value for height

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>

这篇关于如何在 Angular ui-grid Treeview 中动态调整高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！