1

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

有很多来自作者和贡献者的关于动态 CSS 类的例子，例如。http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed但是它们只描述了一种在页面加载期间有条件地应用类的方法以及我need 是一种获取行为的方法，该行为将重新应用页面内容更改的规则，如上所述，基本 angular ng-class 的工作方式。

在 ui-grid 中，您可以在列定义中使用单元格模板或单元格类机制，但在这里似乎都不起作用：

 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

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

4

2 回答 2

2

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

您首先必须在代码中的某处注册您的 gridApi

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

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

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

这基本上会告诉 ui-grid 数据已更改并重新计算 CSS 值。看这里

于 2017-01-18T07:39:54.400 回答
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

于 2016-07-12T11:19:21.367 回答