使用ui-grid常量来禁用滚动条

nab*_*nca 26 scrollbar angularjs angular-ui-grid

使用最新版本的ui-grid(v3.0.0-rc.16),可以单独关闭水平和垂直滚动条.我通过交换得到了这个

$scope.gridOptions.enableScrollbars = false;
Run Code Online (Sandbox Code Playgroud)

$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;
Run Code Online (Sandbox Code Playgroud)

在ui-grid的源代码中,为滚动条定义了三个常量:

scrollbars: {
  NEVER: 0,
  ALWAYS: 1,
  WHEN_NEEDED: 2
}
Run Code Online (Sandbox Code Playgroud)

面对ui-grid仍然不稳定且经常变化的事实,我会觉得使用这些常量而不是特定值更舒服.但我怎样才能访问它们?

Plunker:http://plnkr.co/edit/h0ewAZK616rKCH3T62te

nab*_*nca 50

我在github上得到了答案:

我需要做的就是将uiGridConstants传递给我的控制器,如下所示:

angular.module('myApp').controller('myCtrl',function($scope,uiGridConstants) {
    ...

    $scope.gridOptions.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;

    ...
})
Run Code Online (Sandbox Code Playgroud)


小智 15

约翰帕帕风格:

ExampleController.$inject = ['$scope', 'uiGridConstants'];
function ExampleController($scope, uiGridConstants) {
    var vm = this;

    vm.gridOptions = {
        enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
        enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER
    };
}
Run Code Online (Sandbox Code Playgroud)


小智 11

此解决方法(因为当前禁用了WHEN_NEEDED)是enableHorizontalScrollbar: 0在gridOptions 上设置,然后在样式表中具有以下内容:

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important;
}
Run Code Online (Sandbox Code Playgroud)

现在,水平滚动条仅在需要时显示.