javascript - Angular JS - ng 网格选项卡出问题

Question

首先考虑一个宽度为 400px 的网格，它有四列。所有列的宽度均为 100 像素。列之间的制表符按预期工作。

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

Plunk 1

现在是一个类似的网格，具有相同的 400 像素宽度，同样有四列。但这次每列的宽度为 300px。现在，列之间的制表符不起作用。它仅在屏幕上可见的列内进行切换。

$scope.columns = [
    {  
      "field": 'Classification',
      displayName: 'Classification',
      width: '300 px',
      cellTemplate: link
    },
    {
      "field": 'name',
      displayName: 'Name',
      width: '300 px'
    },
    {
      "field": 'age',
      displayName: 'Age',
      width: '300 px'
    },
    {
      "field": 'Classification',
      displayName: 'Classification',
      width: '300 px',
      cellTemplate: link
    }
];

Plunk 2

查看两个 Plunk 来比较行为。

我不确定为什么会发生这种情况。我在 ng-grid 中显示了近 20 列，并且想要实现在列之间切换的功能。但不能。有人可以帮我解决这个问题吗？

Answer 1

我也遇到了同样的问题，这让我陷入了困境。我来这里希望找到答案，但没有运气。

经过大量研究，在我看来这只是 ng-grid 中的一个错误。似乎没有办法解决...除了升级到更名后的ng-grid、ui-grid新版本。

它看起来相当简单，升级中的所有常见问题都已记录在案 here .

我已经 fork 并更新了您问题中的第二个 Plunk ( Plunk )，虽然它看起来不太完美，但它是一个很好的概念证明。

简而言之，将模块依赖项从 ngGrid 更改为 ui.grid 以及您需要的任何其他功能:

var app = angular.module('myApp',
    ['ui.grid', 'ui.grid.cellNav', 'ui.grid.edit', 'ui.grid.selection']);

...并将这些相同的依赖项添加为与 ui-grid="gridOptions" 相同的元素上的指令:

<div class="gridStyle"
    ui-grid="gridOptions"
    ui-grid-cellNav
    ui-grid-edit
    ui-grid-selection>
</div>

您可以在 Plunk 中看到，在 ui-grid(使用 ui-grid-cellNav)中，在视口(viewport)边缘之外进行 Tab 键切换只需工作，不需要任何 hacky 解决方法.