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

Question

我试图隐藏 Angular ui-grid 的水平滚动条，但我找不到正确的属性。（属性enableScrollbars=false删除两者。）
是否可以只删除水平滚动条？

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

Answer 2

目前，选项 WHEN_NEEDED 目前似乎不可用（ui-grid 3.1.1）。所以我用 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

使用此解决方案，我们可以轻松地再次显示水平条。

Answer 3

如果您被允许使用弹性盒：

.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。此外，您必须将 ui-grid-header 的 padding-right（在本例中为 17px）设置为浏览器滚动条的宽度，并在某些事件上使用 javascript：更改的行数、调整容器大小等。滚动条宽度 = ui-网格视口的 offsetWidth - clientWidth。对滚动条宽度使用硬编码值是不好的，因为不同的浏览器对此有不同的（甚至是可配置的）值。