Question

我使用 ngGrid 来显示我的数据。我想将cellFilter和cellTemplate一起用于特定列，但似乎它们不能一起工作。当我单独使用cellFilter或cellTemplate时，它们完美无缺。基本上，我想以这种方式格式化单元格的值（例如500000 - > 500,000; 1000000 - > 1,000,000），我也希望以红色显示负值。我怎么解决这个问题？谢谢！

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
            }]
        }

Answer 1

我自己找到了答案：p

这很简单。

{{1}}

Answer 2

由于ng-grid现在是UI-Grid v3.x，因此引用了ui-grid / uiGridCell的默认模板

$templateCache.put('ui-grid/uiGridCell',
  "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
);

我想说更新的UI-Grid中的cellTemplate应该如下：

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div class="ui-grid-cell-contents" ng-class="{red: COL_FIELD < 0}">{{COL_FIELD CUSTOM_FILTERS}}</div>'
            }]
        }

您也可以使用cellClass属性，并保留单元格模板的默认值。但是，这会将类应用于.ui-grid-cell。单元格模板会将该类应用于.ui-grid-cell的子项，在上面的示例中为.ui-grid-cell-contents。无论哪种情况适合你的情况，我想。

$scope.gridOptions = {
    data: 'data',
    columnDefs: [
        {
            field: 'Settled',
            cellFilter: 'number',
            cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                var cellVal = grid.getCellValue(row, col);
                return (cellVal < 0) ? 'red' : '';
            }
        }]
}

Answer 3

根据Mammadj的回答，我可以将自己的 cellTemplate 与 cellFilter 结合起来。这是我的参考解决方案，其中executionStatus是以前用作cellFilter: 'emJobStateLabel'的单元格的值。这里，executionStatus通过单元模板传递给emJobStateLabel：

cellTemplate: '<div class="em-row">{{row.entity.executionStatus | emJobStateLabel}} {{row.entity["previewStatus"]==\'New\'?\'\':\'(\'+row.entity.previewStatus+\')\'}}</div>'

不要忘记删除属性cellFilter。

ngGrid cellFilter和cellTemplate无法一起使用

3 个答案: