如何让角度 ui 网格 footerTemplate 工作?
Posted
技术标签:
【中文标题】如何让角度 ui 网格 footerTemplate 工作?【英文标题】:How to get angular ui grid footerTemplate to work? 【发布时间】:2015-05-06 15:21:29 【问题描述】:Angular UI-Grid 有一个名为 footerTemplate 的属性,它应该提供创建自定义页脚模板的可能性。 我尝试在字符串中输入 html 内容(带有一些文本的 div),我还尝试在字符串中添加 .html 文件名,甚至是渲染 div 的 ID,但它们似乎都不起作用。 我也不清楚我是否需要为此启用 showGridFooter,所以我都尝试了,但 footerTemplate 要么根本不显示,要么如果我将 showGridFooter 设置为 true,它会显示默认页脚(总行数在网格中)。 我在这里错过了什么?
【问题讨论】:
【参考方案1】:我将我的 ui-grid 版本更新为“pre-beta”3.x,现在我和你一样。使用 'showGridFooter' 设置为 true 将自动显示总行数信息。指定“footerTemplate”不会做任何事情。我已经尝试过同时存在和不存在“showGridFooter”和“showFooter”。所以我回答的以下段落仅适用于 2.x“稳定”版本的 ui-grid。
奇怪的是,showFooter 属性需要设置为 true。对我有用的是将一个 html 文件添加到我的项目中,其中包含一个充满好东西的 div(就像你在想的那样)。似乎是一个错误。 showGridFooter 属性对我不起作用。
$scope.gridOptions1 =
showFooter: true,
footerTemplate:'somePath/footerTemplate.html'
【讨论】:
【参考方案2】:http://ui-grid.info/docs/#/tutorial/105_footer
您只需将 html 元素(如 div 或锚标记)拖放到模板中即可。
【讨论】:
【参考方案3】:对于 angular-ui-grid 3.0.x,它使用以下示例选项:
$scope.options =
showGridFooter: true,
gridFooterTemplate: '<div>pink floyd</div>'
;
对于 2.x ng-grid 版本,Mokgra 的版本很好。
【讨论】:
【参考方案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 测试
【讨论】:
哇,我一直在寻找 grid.appScope 一段时间。偶然在所有地方偶然发现它。伙计,ui-grid 的文档很糟糕。【参考方案5】:如果您想使用下面的代码查看行值的总和可能会有所帮助
field: 'age', footerCellTemplate: '<div class="ui-grid-cell-contents">Total col.getAggregationValue() </div>', aggregationType: uiGridConstants.aggregationTypes.sum
【讨论】:
以上是关于如何让角度 ui 网格 footerTemplate 工作?的主要内容,如果未能解决你的问题,请参考以下文章