angularui-grid分组header

Question

我正在尝试让群组 header 显示为单元格模板，这是我使用的模板：

<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') 
}

这显示了当前在网格上的标志，但是当我对它进行分组时，它显示了 2 组，它们都有 "check" 标志”，我发现这是因为 COL_FIELD分组是组合计数行的文本 (0 (50), 1 (15)) 这是真的有什么好的方法可以设置组 header currect?

Answer 1

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 函数来执行取消字符串和 return true 或 false。

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

目前正在重写其中的一些逻辑，这可能会提供使这更容易的方法。

angularui-grid分组header

angular ui-grid grouping header

javascript

angularjs

angular-ui

angular-ui-grid