在 ng-grid 中调整页脚列的大小答案

【问题标题】：Resizing footer columns in ng-grid在 ng-grid 中调整页脚列的大小
【发布时间】：2014-05-05 23:24:19
【问题描述】：

我在使用 AngularJS 和 ng-grid 时遇到了一个小问题。

我想在页脚中添加一行，其中包含每列的总值。使用页脚模板我设法做到了，到目前为止一切顺利。

有什么方法可以根据网格列的大小调整这些列的大小？或者至少将行宽设置为跟随网格画布的宽度？

提前致谢。

【问题讨论】：

标签： css angularjs ng-grid

【解决方案1】：

通过使用 CoulmnDefs 并在页脚模板中使用相同的宽度。

    $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    footerRowHeight:'30px',
    footerTemplate: '<div style="width: 20%; display: inline-block;">{{total1}}</div><div style="width: 60%; display: inline-block;">{{total2}}</div><div style="display: inline-block;">{{total3}}</div>',
    totalServerItems: 'totalServerItems',
    columnDefs: [{
      field: 'name',
      width: '20%'
    }, {
      field: 'allowance',
      width: '60%'
    }, {
      field: 'paid'
    }],
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions
    };

这是基于我在某处找到的旧 Plunker。

如果网格变小，这仍然会很糟糕。尝试为 style.css 中的网格或 columnDefs 中的列和页脚模板设置最小宽度。

【讨论】：

这几乎就是我目前正在做的事情。这种方法的问题是，如果您有一个包含许多列的滚动网格（我确实有），页脚不会滚动。
注意，如果你绑定到控制器中的值，上面显示的 total1 属性可能应该是 {{grid.appScope.total1}}