如何使有角度的ui网格footerTemplate工作

How to get angular ui grid footerTemplate to work?

本文关键字：ui 网格 footerTemplate 工作 何使      更新时间：2023-09-26

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

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

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

对于2.x ng网格版本，Mokgra的版本是不错的。

尝试将页脚模板封装在类似的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 进行测试

我将ui网格的版本更新到了"预测试版"3.x，现在我和你一样。使用设置为true的"showGridFooter"将自动显示总行信息。指定"footerTemplate"没有任何作用。我试过"showGridFooter"answers"showFooter"在场和缺席。因此，我的答案的下面一段仅适用于2.x"稳定"版本的ui网格。

Wierdly，showFooter属性需要设置为true。对我来说，有效的方法是在我的项目中添加一个html文件，其中包含一个充满好东西的div（就像你想的那样）。看起来像个虫子。showGridFooter属性对我不起作用。

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

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

您只需将html元素（如div或anchor标记）放入模板中即可。

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

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