Ограничить UI-сетку до максимума видимых строк - PullRequest
Новая
       11

Ограничить UI-сетку до максимума видимых строк

0 голосов
/ 02 января 2019

Я пытаюсь установить высоту пользовательского интерфейса, чтобы он был размером 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>

Мой желаемый результат - это.Есть ли способ достичь этого с существующими параметрами / свойствами пользовательского интерфейса?

enter image description here

1 Ответ

0 голосов
/ 22 марта 2019

Вы можете использовать нумерацию страниц и отключить управление пагинацией: 

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

Посетите http://ui -grid.info / docs / #! / Учебник / учебник:% 20214% 20Pagination

Я редактирую Plunker, чтобы показать результат ответа, который я пытаюсь дать: http://plnkr.co/edit/T0URbr5KiFkEOzWTgE4i?p=preview

...