Question

Angular UI-Grid有一个名为footerTemplate的属性，它可以提供创建自定义页脚模板的可能性。我尝试在字符串中输入html内容（带有一些文本的div），我也尝试在字符串中添加.html文件名，甚至是渲染div的ID，但它们似乎都不起作用。我也不清楚是否需要为此启用showGridFooter，所以我尝试了两者，但是footerTemplate根本没有显示，或者如果我将showGridFooter设置为true，它会显示默认的页脚（总行数）在网格中）。我在这里缺少什么？

Answer 1

对于angular-ui-grid 3.0.x，它使用以下示例选项：

$scope.options = {
                   showGridFooter: true,
                   gridFooterTemplate: '<div>pink floyd</div>'
};

对于2.x ng-grid版本，Mokgra的版本很好。

Answer 2

尝试将页脚模板封装在div标签内，如

 $scope.gridOptions = {
            showGridFooter: true,
            gridFooterTemplate: "<div>Message Here</div>"
    }

如果要显示任何范围变量

$scope.SomeScopeVariable = "Message Here";

$scope.gridOptions = {
        showGridFooter: true,
        gridFooterTemplate: "<div>Grid Footer: {{grid.appScope.SomeScopeVariable}}</div>"
}

grid.appScope允许访问模板中的范围变量。用angular-ui-grid 3.0.x进行测试

Answer 3

我将我的ui-grid版本更新为＆＃34; pre-beta＆＃34; 3.x现在我和你在同一点上。使用＆＃39; showGridFooter＆＃39;设置为true将自动显示总行信息。指定一个＆＃39; footerTemplate＆＃39;没有做任何事情。我已经尝试过使用showGridFooter＆＃39;和＆＃39; showFooter＆＃39;现在和缺席。因此，我的回答的以下段落仅适用于2.x＆＃34;稳定＆＃34; ui-grid的版本。

Wierdly， showFooter 属性需要设置为true。对我有用的是在我的项目中添加一个html文件，其中包含一个满满的好东西（就像你在想的那样）。好像是一个bug。 showGridFooter属性对我没用。

$scope.gridOptions1 = {
    showFooter: true,
    footerTemplate:'somePath/footerTemplate.html'
}

Answer 4

http://ui-grid.info/docs/#/tutorial/105_footer

您只需在模板中删除div或锚标记等html元素即可。

Answer 5

如果您想使用下面的代码查看行值的总和，可以提供帮助

{ field: 'age',  footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue()  }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum }

如何获得角度ui网格footerTemplate工作？

5 个答案: