cellClass 不适用于角度 ui 网格

Posted 2023-03-06

【中文标题】cellClass 不适用于角度 ui 网格

【英文标题】：cellClass is not working for angular ui grid

【发布时间】：2017-01-05 05:26:26

【问题描述】：

这是我的代码：

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>

当我从 columnDefs 数组中替换 cellClass 属性时，它绝对可以正常工作，但是当我将 cellClass 属性添加到 columnDefs 数组时，我的网格不显示数据。在检查 ui-grid dom 时，我的数据与 ui-grid cell 绑定，但未出现在 ui 上。

【问题讨论】：

我不认为name : key 是正确的，您将对象绑定到网格期望的字符串。

【参考方案1】：

只需覆盖 ui.grid.css 中的这两个 css 类

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


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

 

从上面提到的 ui-grid.css 中的 css 类中删除背景色 css

【讨论】：

对，但是 cellClass 应该可以工作，你不需要覆盖 ui-grid.css。

【参考方案2】：

使用cellTemplate 代替cellClass。

例子：

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