如何在Angular ui-grid Treeview中动态调整高度? [英] How to dynamically adjust height in Angular ui-grid Treeview?
问题描述
我正在看下面使用Angular 1.5的树视图示例:链接
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?
关于树视图的相关文档位于此处.但是,此处显示的示例也具有固定的高度,我想将其更改为动态高度.
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网格树视图设置手动高度"
在registerApi上结帐:
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屋!