Angular JS - ng grid tab out 问题

Question

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

.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。

我已经根据您的问题 (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）中，超出视口边缘的选项卡可以正常工作，不需要任何 hacky 解决方法。