角度ui网格分组头

时间:2015-05-16 09:56:53

标签: javascript angularjs angular-ui angular-ui-grid

我正在尝试将组标题显示为cellTemplate,这是我使用的模板:

<div class="ui-grid-cell-contents">
    <div ng-show="COL_FIELD">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="COL_FIELD">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

这是columnDefs:

{ 
    name:'active', 
    width: 100, 
    cellTemplate: $templateRequest('scripts/common/partials/formatter/boolean.tpl.html') 
}

这显示了目前在网格上的标志,但是当我对它进行分组时,它显示了两组,它们都有&#34;检查&#34;签署&#34;,我发现它发生是因为分组上的COL_FIELD是组合计数行的文本(0(50),1(15)) 这是真的 有没有很好的方法来设置组头当前?

1 个答案:

答案 0 :(得分:2)

http://ui-grid.info/docs/#/tutorial/209_grouping中有一个示例,您可以在底部看到在分组列上运行的性别过滤器。它解除了值,然后将过滤器应用于没有计数的部分,然后再将字符串重新组合在一起。

要将此逻辑应用于您的cellTemplate,您需要在模板中放置一个函数来取消键入值,然后只取出您想要的位:

<div class="ui-grid-cell-contents">
    <div ng-show="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

您需要编写$ scope.checkBool函数来执行unstringing并返回true或false。

如果您还想要计数,那么您需要编写一些逻辑来获取单元格的计数部分并将其追加到最后。

目前正在重写其中一些逻辑,这可能会让方法变得更容易。