ui-grid如何使列和标题排列并跨越网格的整个宽度

Question

我刚刚开始使用ui-grid进行测试，看看我是否可以在我的某些项目中使用它。我遇到的问题是当它呈现各种大小的列并且不与列标题对齐时。

在我的控制器中，我定义了gridOptions，如下所示：

var vm = this;        
vm.smtGridOptions = {
            columnDefs:
            [{ field: 'smtTypeCodeText', displayName: 'Type' },
                { field: 'description', displayName: 'Description' },
                { field: 'location', displayName: 'Location' },
                { field: 'dateEntered', displayName: 'Date Entered' }
            ]
        }

使用

进一步限制数据

vm.smtGridOptions.data = vm.detail.smts;

在我的html中，我添加了如下网格：

<div ng-show="name.detail.smts.length > 0" scroll-to-section>
   [![enter image description here][1]][1]<hr style="clear: both; margin-bottom: 5px !important;"/>
      <a class="anchorOffset" id="smts"></a>
      <p>
        <strong><em>SMTs</em></strong>
     </p>
  <div id="smtGrid" ui-grid="name.smtGridOptions" class="uigrid"></div>
</div>

注意，我在这个项目中使用ui-router，因此name代表当前视图的ControllerAs。

选项和数据绑定正在运行但应用程序呈现时。我得到一个这样渲染的网格：

是否有设置或CSS设置允许网格列跨越（几乎以合理的方式）网格的宽度。目前看来，它会对网格中的数据进行评估，并且无论列定义如何，都会使列匹配。

提前致谢

Answer 1

我遇到了同样的问题。我正在使用ui-router和ui-bootstrap。我的网格位于ui-bootstrap项目的uib-tab元素中。在标签之间切换时，我遇到了你正在看到的渲染。

对我有用的是将'ui.grid.autoResize'注入我的模块并将ui-grid-auto-resize指令添加到我的网格div。

在这里的ui-grid教程页面上：http://ui-grid.info/docs/#/tutorial/108_hidden_grids这个Plunker有一个链接：http://plnkr.co/edit/fwdXMamTBrR1yKVwcohZ?p=preview，其设置类似我所遵循的。

var app = angular.module('app', ['ui.grid', 'ui.bootstrap', 'ui.grid.autoResize']);

<div id="grid1" ui-grid="gridOptions" ui-grid-auto-resize class="grid"></div>