Question

我正在尝试将ui网格的高度设置为3行的大小。我浏览了ui-grid文档，其中包含类似minRowsToShow的内容，但是没有maxRowsToShow或类似内容的等效属性。

我试图避免在网格上手动设置css固定高度。

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'amount', name: 'Number', cellFilter: 'fractionFilter' },
      { field: 'amount', name: 'Currency', cellFilter: 'currencyFilter:this' }
    ]
  };
  
    $scope.gridOptions.data = [
      {
        "name": "Claire",
        "amount": 21.9015,
        "currency": "euro"
      },
      {
        "name": "Fitzpatrick",
        "amount": 41.6352,
        "currency": "pound"
      },
      {
        "name": "Ericka",
        "amount": 31.4228,
        "currency": "pound"
      },
      {
        "name": "Navarro",
        "amount": 2.1944,
        "currency": "dollar"
      },
      {
        "name": "Cherie",
        "amount": 31.9234,
        "currency": "dollar"
      },
      {
        "name": "Cobb",
        "amount": 45.5756,
        "currency": "pound"
      }
   ]; 
}])

.filter('fractionFilter', function () {
  return function (value) {
    return value.toFixed(0);
  };
})

.filter('currencyFilter', function () {
  var currencyMap = {
    'dollar': '$',
    'pound': '£',
    'euro': '€'
  };
  
  return function (value, scope) {
    return currencyMap[scope.row.entity.currency] + value.toFixed(2);
  };
})

;

<!doctype html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

我想要的结果是这样。是否可以通过现有的ui-grid选项/属性来实现这一目标？

Answer 1

您可以使用分页并禁用分页控件：

$scope.gridOptions1 = {
     enableHorizontalScrollbar: 0,
     enableVerticalScrollbar: 0,
     paginationPageSizes: [3],
     paginationPageSize: 3,
     enablePaginationControls: false,
       columnDefs: [
        ...
       ]
     };

访问http://ui-grid.info/docs/#!/tutorial/Tutorial:%20214%20Pagination

我编辑“柱塞”以显示我要给出的答案的结果：http://plnkr.co/edit/T0URbr5KiFkEOzWTgE4i?p=preview

将ui-grid限制为可见的最大行

1 个答案: