AngularJS ui-grid 데이터가 래퍼 외부에 나타 납니까? 페이지 매김 작업, 필터링 작업, 정렬 작동하지만 데이터 -

Question

HTML

<div id="landingGrid" ui-grid="landingGrid" class="landingGrid" ui-grid-pagination></div> 

JS는

 $scope.submitted_columns = [ 
      {field: "application_id", 
       visible: false}, 
      {field: "date_entered", 
       displayName: "Created On", 
       enableFiltering: true, 
       callClass: 'text-center', 
       width: '10%', 
       cellFilter: 'date : "MM/DD/YYYY"'}, 
      {field: 'application_name', 
       displayName: "Name", 
       enableFiltering: true, 
       width: '15%', 
       cellClass: 'text-left'}, 
      {field: 'merchant_name', 
       displayName: "Merchant DBA", 
       enableFiltering: true, 
       width: '15%', 
       cellClass: 'text-left'}, 
      {field: 'contract_type', 
       displayName: "Contract Type", 
       enableFiltering: false, 
       width: '10%', 
       cellClass: 'text-left'}, 
      {field: 'funding_type', 
       displayName: "Funding Type", 
       enableFiltering: false, 
       width: '8%', 
       cellClass: 'text-left'}, 
      {field: 'application_status', 
       displayName: "Status", 
       enableFiltering: true, 
       width: '8%', 
       cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) { 
        if (grid.getCellValue(row, col) === "saved") { 
         highlightRowsByStatus(rowRenderIndex, 'red'); 
         return "text-left"; 
        } 
        if (grid.getCellValue(row, col) === "wait_on_docs" || grid.getCellValue(row, col) === "contract_out") { 
         highlightRowsByStatus(rowRenderIndex, 'orange'); 
         return "text-left"; 
        } 
       } 
      }, 
      {field: 'purchase_price', 
       displayName: "Offer Amount", 
       enableFiltering: false, 
       width: '10%', 
       cellClass: 'text-right', 
       cellFilter: 'currency'}, 
      {field: 'decline_reason', 
       displayName: "Decline Reason", 
       enableFiltering: false, 
       width: '10%', 
       cellClass: 'text-left'}, 
      {field: 'iso_dba', 
       displayName: "Sales Agent", 
       enableFiltering: true, 
       cellClass: 'text-left'} 
     ]; 
     $scope.landingGrid = { 
      useExternalSorting: true, 
      enableSorting: true, 
      enableFiltering: true, 
      columnDefs: $scope.submitted_columns, 
      paginationPageSizes: [25, 50, 100, 250], 
      paginationPageSize: 25, 
      enableCellSelection: false, 
      enableRowSelection: false, 
      enableCellEdit: false, 
      onRegisterApi: function (gridApi) { 
       $scope.gridApi = gridApi; 
       $scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) { 
        console.debug(sortColumns); 
       }); 
      } 
     }; 
     LandingFactory.getSubmittedNWApplicationsForUserID(UserObject.userId, $scope.recordsStart, $scope.recordsLimit).then(
       function successCallback(response) { 
        if (typeof response.data.data !== undefined) { 
         $scope.landingGrid.data = response.data.data; 
        } else { 
         console.log("No records to return"); 
        } 
       }, function errorCallback(response) { 
      console.debug("Error returned from getSubmittedNWApplicationsForUserID", response); 
     }); 
    }; 

데이터 결과가 정확한지, 그리드 자체가 큰 보이는 행은 페이지 매기기 바닥 글 아래에 렌더링됩니다. 누구든지 아이디어가 있습니까?

Answer 1

문제가 발견되었습니다. ui-grid.min.css에서 다음 코드를 변경해야합니다 :

.ui-grid-header-cell-wrapper { 
    position: relative; 
    display: table; 
    box-sizing: border-box; 
    height: 100%; /* REMOVE ME */ 
}