javascript - cellClass が angular ui グリッドで機能しない

Question

これが私のコードです：

for (var i = 0; i < gridData.length; i++) {
    var currentData = gridData
    $.each(currentData, function(key, value) {
        if (!angular.isFunction(value)) {
            $scope.columnDefs.push({
                name : key,
                cellClass : 'red',
            });
        }
    });
}
$scope.gridOptions = {
    columnDefs : $scope.columnDefs
};
$scope.gridOptions.data = data;

.red{
	background-color: #ff0000;
	color: #ffffff; 
}

<div ng-controller="GridController" id="grid1">
     <div  ui-grid="gridOptions" class="grid"></div>
</div>

cellClass配列からプロパティを置き換えるcolumnDefsと、まったく問題なく動作しますが、配列にcellClassプロパティを追加するとcolumnDefs、グリッドにデータが表示されません。ui-grid domデータを検査すると、バインドされui-grid cellていますが、UI に表示されません。

Answer 1

ui.grid.css でこの 2 つの CSS クラスをオーバーライドするだけです。

   .ui-grid-row:nth-child(odd) .ui-grid-cell {

}
.ui-grid-row:nth-child(even) .ui-grid-cell {

} 

上記の ui-grid.css の css クラスから background-color css を削除します。

Answer 2

cellTemplateの代わりに使用しcellClassます。

例：

cellTemplate: "<div class='red'>{{COL_FIELD}}</div>"