如何在ui-grid中实现反映页面内容变化的动态cssclass？

Question

我的目标是在 ui 网格单元格中实现动态 CSS class，最简单的示例是根据单元格的值为性别列着色或显示图标。 CSS classes 将根据页面上的当前数据进行更新，例如。单击一个按钮更新绑定到网格的数据，classes 将被重新计算。

作者和贡献者在动态 CSS classes 上提供了大量示例，例如。 http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed 但是他们只描述了一种在页面加载期间有条件地应用 class 的方法，而我需要的是一种方法来获得将重新应用页面内容更改规则的行为，如上所述基本 angular ng-class 有效。

在 ui-grid 中，您可以在列定义中使用单元格模板或单元格 class 机制，但似乎都不适用于此处：

 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (grid.getCellValue(row ,col).toLowerCase() === 'male') {
      return 'blue';
    }
  }

cellTemplate: 
    '<div ng-class="{ blue: \'{{COL_FIELD.sex}}\' == \'male\', 
    green: \'{{COL_FIELD.sex}}\' == \'female\'}">
    {{ COL_FIELD.first }} {{ COL_FIELD.last }}</div>'

我用这个问题的完整示例创建了一个 plunkr：https://plnkr.co/edit/rob144gVQo6uy1AVuJlS

我还尝试在网格对象和 angular 的 $scope.apply 上调用各种刷新方法，但没有效果。

Answer 1

正确的方法是在单元格模板中通过附加一个函数来使用 grid.appScope 对象：

cellTemplate: '<div ng-class="{ \'my-css-class\': grid.appScope.rowFormatter(row) }"> ... '

其中 rowFormatter 应该是必须附加到控制器范围的二进制函数：

$scope.rowFormatter = function(row) {
    return row.entity.gender === 'male';
};

这实际上隐藏在文档示例中：
http://ui-grid.info/docs/#/tutorial/317_custom_templates

Answer 2

您可以在不使用 cellTemplate 的情况下动态设置 cellCss。

您首先必须在代码

的某处注册您的 gridApi

$scope.gridOptions.onRegisterApi = function ( gridApi ) { 
  $scope.gridApi = gridApi;
}

然后，在数据发生变化的地方添加数据更改通知调用

$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );

这基本上会告诉 ui-grid 数据已更改，re-calculate CSS 值。 see here

如何在ui-grid中实现反映页面内容变化的动态cssclass？

How to achieve dynamic css class in ui-grid that reflects page content changes?

angularjs

ng-grid

angular-ui-grid

ui-grid