javascript - UI 网格 - 水平滚动不适用于大量数据

Question

我有一组非常大的数据，需要水平滚动才能适合页面。 UI Grid 是否支持超出页面宽度的数据水平滚动？

笨蛋:http://plnkr.co/edit/WcdQyUNm4UNxjdyX6UDh?p=preview

css:
.grid {
  width: 200px;
  height: 250px;
}

js:
var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];
}]);

Answer 1

这是工作 Plunker

HTML

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="yourGridOptions" class="grid"></div>
</div>

JS

注入(inject) uiGridConstants 服务。

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

  $scope.yourGridOptions = {
    enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
    enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
    columnDefs: [{
      name: 'firstName',
     width:100

    }, {
      name: 'lastName',
     width:100

    }, {
      name: 'company',
      width:100

    }, {
      name: 'employed',
     width:100

    }],
    data: [{
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
    }, {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
    }, {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
      "employed": false
    }]
  };
}]);