Question

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

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

Plunk 1

现在是类似的400px宽度的网格，同样有四列。但这次每列的宽度为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-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解决方法。

Angular JS - ng网格标签问题

1 个答案: