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

Question

我正在使用angularjs ui-grid，但是我没有在网格上获得水平滚动条，并且由于网格中没有滚动条，所有列标题都已混合。 如何启用水平滚动条？

Answer 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> 

Answer 2

设置enableHorizo​​ntalScrollbar：0

有关更多信息，请通过以下链接。

https://github.com/angular-ui/ui-grid/issues/2734