angularjs – Angular 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,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