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解決方法要求。