隐藏水平滚动条（Angular ui-grid）

Question

我想要隐藏 Angular ui-grid 的水平滚动条，但是我找不到正确的属性。(属性 enableScrollbars=false 会同时删除两个滚动条。)
有没有可能只删除水平滚动条？

- Andreas N.

Answer 1

使用Github上最新的版本v3.0.0-rc.16，您可以分别禁用水平和垂直滚动条。

enableScrollbars = false;

使用

enableHorizontalScrollbar = value; 
enableVerticalScrollbar = value;

随着

value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */

更新： 如果您想使用常量而不是整数值，请查看相应的帖子：

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

更新： 选项WHEN_NEEDED目前似乎不可用。 也许这将再次改变，请查找源代码中可用的常量。

常量在以下位置定义：

https://github.com/angular-ui/ui-grid/blob/master/packages/core/src/js/constants.js

- nabinca

---

嗨 @nabinca，这是一个很古老的故事，但是在ui-grid常量中似乎没有值为2的'WHEN_NEEDED'可用，或者是我没注意到？ - BiJ

是的，你说得对。WHEN_NEEDED目前不可用。滚动条总是会有一些问题 - 我已经更新了我的答案！ - nabinca

我遇到了一个问题，列没有正确地跨越宽度（留下垂直滚动的空间）。我使用ng-if在页面加载时隐藏网格，然后在网格初始化后显示它。我看到一些人在超时内使用$scope.gridApi.core.handleWindowResize();来解决这个问题。 - Justin Fisher

Answer 2

目前（ui-grid 3.1.1），WHEN_NEEDED选项似乎暂时不可用。因此，我通过jQuery和CSS进行了解决：

对于简单的情况，我们只需要这样做：

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
    overflow-x: auto !important;
    /* or use: overflow-x: hide!important; */
}

为了更加灵活，我们可以使用CSS类和jQuery。首先，我们添加一个新的类：

.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
    overflow-x: hidden !important;
}

在控制器中，我们将使用jQuery调用这个类：

$timeout(function(){
    if (!!$scope.gridOptions.data) {
        $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
    }
});

为了隐藏选择和分组时的空白间隙（http://i.imgur.com/veevhgQ.png），我们使用以下代码：

$timeout(function(){
    if (!!$scope.gridOptions.data) {
        /* To hide the blank gap when use selecting and grouping */
        $('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
        $('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
    }
});

当我们使用选择和分组功能时，17px是间隙的高度。

演示: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview

通过这个解决方案，我们可以轻松地再次显示水平条。

- Envy

Answer 3

如果允许使用flexbox：

.ui-grid-render-container-body {
    .ui-grid-header {
      padding-right: 17px;

      .ui-grid-header-viewport {
        width: 100%;

        .ui-grid-header-canvas {
          width: 100%;

          .ui-grid-header-cell-wrapper {
            display: block;
            width: 100%;

            .ui-grid-header-cell-row {
              display: flex;
              min-width: 0;

              .ui-grid-header-cell {
                flex: 1 1 0;
                min-width: @col-min-width;
              }
            }
          }
        }
      }
    }

    .ui-grid-viewport {
      overflow: auto !important;
      display: flex;

      .ui-grid-canvas {
        flex: auto;
        min-width: 0;

        [role="row"] {
          display: flex;
          min-width: 0;

          .ui-grid-cell {
            flex: 1 1 0;
            min-width: @col-min-width;
          }
        }
      }
    }
  }

其中col-min-width是您通常在gridOptions中设置的minWidth。此外，您还必须使用javascript在某些事件上设置ui-grid-header的padding-right（在此示例中为17px）为浏览器滚动条的宽度：行数更改，容器调整大小等。滚动条宽度= ui-grid-viewport的offsetWidth-clientWidth。使用硬编码的滚动条宽度值很糟糕，因为不同的浏览器具有不同的（甚至可配置的）值。

- Dima Slivin