ng-grid 的水平滚动 - 2.0.11答案

【问题标题】：Horizontal Scrolling of ng-grid - 2.0.11ng-grid 的水平滚动 - 2.0.11
【发布时间】：2014-11-14 14:40:48
【问题描述】：

我的应用程序中有一个 ng-grid。网格的高度和宽度是自动给出的。我可以选择将列动态添加到网格中。当列数较少时，没有问题。但是，如果列数更多，那么我的列将缩小而不是水平滚动条，并且所有列在我的网格中都以肮脏的方式出现。网格的宽度不会改变，所有的列都会缩小以适应网格。我缺少什么来获得水平滚动条。

编辑： 以上是我原来的问题。现在我能够获得水平滚动条。但只有某些列是可见的。当我向右滚动时，我得到空网格。最后几列没有绑定到 ng-grid。只有适合 ng-grid 而没有滚动的列才会被绑定。请有任何解决方案！

注意： 我正在使用 ng-grid 2.0.11。版本有这个bug吗？

https://github.com/angular-ui/ng-grid/issues/2071

【问题讨论】：

你能发布你的代码吗？我认为问题出在宽度自动上，这会导致 cols 缩小。您可以尝试使用overflow-x: auto 的网格固定宽度（100% ？）和 cols 的固定宽度

标签： c# css .net angularjs ng-grid

【解决方案1】：

如果要添加水平滚动条以防添加额外的列，请添加 columnDefs，如下所示：

  $scope.gridOptions = {
    data: 'myData',

    columnDefs: [{ field: "<fieldname>", width: 120},
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 }]
  };

如果（总列*列宽）大于在 css 部分中声明的 ng-grid 表的宽度，这将为您提供水平滚动条。

angularJS 默认使用 .gridStyle 类作为 ng-grid。

参考：ng-grid

您也可以在此处查看列固定示例：columnDefs example with pinning

如果没有 columnDefs，那么列会尝试自动适应现有的表格宽度，因此列会缩小。

【讨论】：

但是有没有办法以百分比类型给出宽度。您提供的示例是 px 大小。我说的对吗？
@sms：是的！在上面的示例中，像素格式的宽度。如果你想在 % 模式下使用宽度，你可以。在 ng-grid 的主 css 中，您可以使用 %.对于 Try :: 在上面的示例中，将 .gridStyle 类下的宽度从 px 更改为 %。
@sms : 要么去掉enablePinning:true，要么使enablePinning:false，然后试试空格问题可能是pinning的问题。
@sms ：看起来这是与您使用的版本相关的错误。为了将其升级到 ng-grid 3.0，主要是现在模块名称已从 ng-grid 更改为 ui-grid，有关更多详细信息，您可以参考以下链接：github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md & technpol.wordpress.com/2014/08/23/…
问题就像 plunker 引用了最新的 ng-grid.css 而您的项目使用的是旧的。

【解决方案2】：

我有类似的问题并遵循以下两个步骤：

The width of each column should be given in px format only. There will be some issue if it is given in %format.

The ng-grid.css have to be updated to have .ngviewport class with overflow:auto. In my project .ngviewport did not have overflow and this too was a reason for the issue.

【讨论】：