如何让 angular ui grid footerTemplate 工作？

Question

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

Answer 1

我将我的 ui-grid 版本更新为 "pre-beta" 3.x 现在我和你一样。使用 'showGridFooter' 设置为 true 将自动显示总行信息。指定 'footerTemplate' 没有任何作用。我试过 'showGridFooter' 和 'showFooter' 存在和不存在。因此，我的回答的以下段落仅适用于 2.x "stable" 版本的 ui-grid.

奇怪的是，showFooter 属性需要设置为 true。对我有用的是向我的项目添加一个 html 文件，其中包含一个 div 的好东西（就像你想的那样）。似乎是一个错误。 showGridFooter 属性对我不起作用。

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

Answer 2

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

您只需在模板中放置 html 个元素，例如 div 或锚标记。

Answer 3

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

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

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

Answer 4

尝试将页脚模板包含在 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 5

如果您想查看行值的总和，使用下面的代码可能会有帮助

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

如何让 angular ui grid footerTemplate 工作？

How to get angular ui grid footerTemplate to work?

javascript

footer

angularjs

angular-ui-grid