如何让角度 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 工作?的主要内容,如果未能解决你的问题,请参考以下文章

kendo ui 角度网格选择事件

在小数点角度 ui 网格处对齐数字

点击按钮上的角度ui网格过滤器

如何使用角度 BrowserAnimationsModule 为网格框更改设置动画?

范围内的角度 jquery-ui 可选问题

UI 网格 CSS 不起作用