Angular UI-Grid（新的） - 基于行的动态/自动调整高度

Question

如何根据行数调整角度ui-grid（the new one）？奖金问题，最多显示最大高度或最大行数？

Answer 1

这是完整的动态UI-Grid实现。

使用分页选项和分组。

$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [10, 25, 50, 100, 500],
paginationPageSize: 10,
onRegisterApi: function(gridApi) {
  $scope.gridApi = gridApi;
  $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
  $scope.gridApi.treeBase.on.rowExpanded(null, function(row) {
    updatePagination(row.treeNode.children.length);
  });
  $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) {
    updatePagination(-row.treeNode.children.length);
  });
}

};

功能：

function updatePagination(rowsDifference) {
  //updating pagination will trigger singleFilter where the height is being reset
  $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500];
  $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference;
}
//you can name the function anything, I was doing global external filtering inside this, so just named this.
$scope.singleFilter = function(renderableRows) {
    $timeout(function() {
      var newHeight = ($scope.gridApi.grid.getVisibleRowCount() * 30) + 145;
      angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
    }, 10);
    return renderableRows;
  }

不要忘记注入'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination'依赖项

HTML

<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination ui-grid-grouping></div>

Working PLUNKER

Answer 2

好吧，这不完美，但它可能会给你一个想法。

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      reSize(data.length);
    });

  var reSize = function (rows) {
    // This will adjust the css after the Data is loaded
    var newHeight =(rows*30)+60;
    angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');

  };

加载数据后，将使用加载的行数触发reSize（data.length）。

在reSize（）中，我只希望一行高度为30px，并为标题和边框添加一个额外的偏移量（这是一种疯狂的猜测）。

看看这个PLUNKER，看看它在运动中。

Answer 3

我实际上遇到了同样的问题并通过向rowExpandedBeforeStateChanged事件添加事件处理程序来解决它，该事件更新了gridOptions的expandableRowHeight（请参阅here）。

例：

let gridOptions = 
{
    columnDefs: columnDefs,
    data: myData,
    // ... other option fields
};

gridOptions.onRegisterApi = (gridApi) => 
{       
      gridApi.expandable.on.rowExpandedBeforeStateChanged(this.$scope, (row) => 
      {
              if(!row.isExpanded) 
              {
                gridApi.expandable.collapseAllRows()
                row.grid.options.expandableRowHeight = myData.length * 30 // put your length here
              }
      })
}

Answer 4

我能够使可扩展行高度动态化，并根据子网格中的行进行展开。我也在为可扩展和父网格使用外部分页选项。可能是我在这个话题上错了，或者报道了bubg。但是使用expandedRowHeight，我可以设置可扩展网格的动态高度。

我像这样设置expandedRowHeight，它适用于我的要求。一旦调用事件以按照分页设置该数据，就会设置此项

`

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                            subgridpaginationOptions.pageNumber = newPage;
                            subgridpaginationOptions.pageSize = pageSize;
                            prepareData()
                        });`

```

if (angular.isDefined($scope.childRow.entity.subGridOptions.data)) {
                rows = $scope.childRow.entity.subGridOptions.data.length;
            }

            if (rows != undefined) {
                $scope.childRow.expandedRowHeight = 90 + ((rows) * 30);
            }

```

Answer 5

为基于行的UI网格设置手动高度如果没有解决方案可以尝试这个，请在​​已注册的onRegisterApi上调用gridHeight（）函数，或者继续更改特定数组上的watchcollection。

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-auto-resize ui-grid-resize-columns ui-grid-selection ng-style="{height: vm.totalHeight+'px'}"></div>