如何在 ui-grid angularjs 中启用水平滚动条答案

【问题标题】：How to Enable horizontal scrollbar in ui-grid angularjs如何在 ui-grid angularjs 中启用水平滚动条
【发布时间】：2018-12-28 13:02:20
【问题描述】：

我正在使用 angularjs ui-grid，但我的网格上没有水平滚动条，并且所有列标题都混合在一起，因为网格中没有滚动条。如何启用水平滚动条？

【问题讨论】：

ui-grid.info/docs/#/tutorial/191_horizontal_scrolling
参考以下链接In Stack OverFlow

标签： angularjs angular-ui-grid

【解决方案1】：

如果你想一直显示水平滚动条，在你的滚动条选项中将enableHorizontalScrollbar设置为uiGridConstants.scrollbars.ALWAYS，如果你想只在需要时显示，设置为uiGridConstants.scrollbars.WHEN_NEEDED。

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

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

    $scope.yourGridOptions = {
      enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, // Here!
      enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
      columnDefs: [{
        name: 'col1',
        width:150
      }, {
        name: 'col2',
        width:150
      }, {
        name: 'col3',
        width:150
      }, {
        name: 'col4',
        width:150
      }],
      data: [{
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }, {
        "col1": "aa",
        "col2": "bb",
        "col3": "cc",
        "col4": "dd"
      }]
    };
  }]);

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

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <body>

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


    </body>
</html>

【讨论】：

WHEN_NEEDED 在 ui-grid - v3.0.7 中不可用

【解决方案2】：

设置 enableHorizontalScrollbar: 0

【讨论】：