javascript - 如何在 Angular ui-grid Treeview 中动态调整高度？

Question

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

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

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

有没有办法根据树节点被点击展开的方式动态调整这个高度？

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

Answer 1

我设法通过实现动态更改容器高度的方法找到了解决方案。在 Controller 中，我首先使用 ng-style 初始化将在 JS 和模板中使用的变量:

//===================================================
// 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 

然后在初始化 TreeView 网格选项时，可以引用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() 所需的方法添加到 Controller 中, 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(); .我必须注释掉这一行，滚动才能再次正常工作。