ui-grid 如何让列和标题对齐并跨越网格的整个宽度答案

【问题标题】：ui-grid how to get columns and headers to line up and span full width of the gridui-grid 如何让列和标题对齐并跨越网格的整个宽度
【发布时间】：2016-04-21 10:12:58
【问题描述】：

我刚刚开始使用 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，因此名称代表当前视图的 ControllerAs。

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

是否存在允许网格列跨越（几乎以合理的方式）网格宽度的设置或 CSS 设置。目前看来，它评估网格中的数据并渲染列以匹配列定义。

提前致谢

【问题讨论】：

标签： angular-ui-grid

【解决方案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>

【讨论】：