2016-10-28 1 views
1

각도 ui-grid가 자동으로 높이를 조정하여 스크롤 막대가 없어도 모든 행을 표시 할 수 있지만 공간이있을 경우 공간 낭비가 없습니다. 그리드의 몇 행만. 누군가 비슷한 질문 (Angular ui-grid dynamically calculate height of the grid)을 요청했으나 행 높이가 일정하다는 전제가 있습니다. 줄 바꿈이 서로 다른 경우 (예 : 줄 바꿈을 사용할 수 있기 때문에) 질문에 대한 솔루션이 일정한 행 높이를 가정하기 때문에 문제에 대해 허용 된 솔루션 (https://stackoverflow.com/a/28706349/877570)이 작동하지 않습니다. 많은 양의 텍스트가있는 셀이 있고 텍스트가 다음 줄로 줄 경우 그 줄의 높이가 다릅니다. "목록의 크기로 설정해야합니다 물론 minRowsToShow 및 virtualizationThreshold의."(https://github.com/angular-ui/ui-grid/issues/1735)각도 ui-grid 행의 높이가 일정하지 않은 경우

.ui-grid, .ui-grid-viewport { 
    height: auto !important; 
} 

:

나는 가능한 anhkind 여기에 사용자가 해결책을 발견

그러나 솔루션을 배포 할 때 그리드 렌더링 시간이 오래 걸립니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까? 아니면 대체 솔루션이 있습니까?

답변

0
$scope._minRows = 10; 
    $scope._maxRows = 10; 

    // Lots of Grid Options, plus data setting going on here. 

    $scope.agendaItemsGridOptions.onRegisterApi = function(gridApi) { 
     //set gridApi on scope 
     $scope.gridApi = gridApi; 
    }); 

    var setMinRowsLogic = function() { 
     $scope.gridApi.grid.options.minRowsToShow = $scope._minRows; 
     if (!_.isUndefined($scope.agendaItemsGridOptions.data)) { 
      var len = $scope.agendaItemsGridOptions.data.length; 
      if (len > $scope._maxRows) { 

       $scope.gridApi.grid.options.minRowsToShow = $scope._maxRows; 
      } else 
      if (len < $scope._minRows) { 
       $scope.gridApi.grid.options.minRowsToShow = $scope._minRows; 
      } else { 
       $scope.gridApi.grid.options.minRowsToShow = len; 
      } 
     } 
    }; 
+0

데이터가없는 경우 _minRows = 1로 설정할 수 있으며 항상 적어도 하나의 행이됩니다. 그렇지 않으면 항상 _maxRows까지 .data []의 크기가됩니다 (그리고 그 높이를 설정하거나 항상 데이터 []의 점유가되도록 논리를 변경할 수 있습니다). –

+0

필자가 작성한 이유로 제안한 CSS 규칙을 사용하지 않습니다. –

+0

마지막 코멘트 .data []가 수정 될 때마다 setMinRowsLogic()을 호출하십시오. –

관련 문제