Angular JS - ng grid tab out issue

Question

首先考虑宽度为400px的网格，该网格有四列。所有列的宽度都是100px。列之间的Tabbing按预期工作。

.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

看到两个Plunks进行比较的行为。

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

Answer 1

我一直有这个完全相同的问题，它一直在把我推上墙。我来这里希望找到答案，但没有运气。

因此，经过大量研究，我认为这只是一个NG网格中的错误。似乎没有办法解决它...除了升级到重新命名的新版本的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中看到超出视口边缘的TabBar 仅在UI网格中工作（使用ui-grid-cellNav ），没有hacky解决方法要求。