ui-grid 如何获得列和 headers 排列并跨越网格的全宽

Question

我刚刚开始使用 ui-grid 进行测试，看看是否可以在我的一些项目中使用它。我遇到的问题是它呈现的列大小不一并且不与 headers.

列对齐

在我的控制器中，我将 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 设置允许网格列跨越（几乎以合理的方式）网格的宽度。目前看来，无论列定义如何，它都会评估网格中的数据并呈现要匹配的列。

提前致谢

Answer 1

我遇到了同样的问题。我正在使用 ui-路由器和 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 There is a link to this 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>

ui-grid 如何获得列和 headers 排列并跨越网格的全宽

ui-grid how to get columns and headers to line up and span full width of the grid

angular-ui-grid