我是Angular和UI Grid的新手当我为此目的显示一个特定值时，我试图为UI网格的单元格着色我在GridOptions的columndef中使用了cellcalss属性
$scope.gridOptions = {
enablePaginationControls: false,
paginationCurrentPage:1,
data:scdet.data,
columnDefs: [
{name: 'Route Number', field: 'RouteNumber' },
{
name: 'Load Ready', field: 'LoadReady', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col).toLowerCase() === 'No') {
return 'semi-red';
}
}
},
{
name: 'Start of Day', field: 'SOD', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col).toLowerCase() === 'No') {
return 'semi-red';
}
}
},
{name: 'End of Day', field: 'EOD'},
{name: 'Cut off', field: 'Cutoff'},
{name: 'Settlement', field: 'Settlement'},
{name: 'Closed', field: 'Closed'}
]
};
CSS为此
.semi-red
{
background-color:#DC143C;
}
但是红色没有显示，有人请指出我在这段代码中做错了什么
默认单元格class覆盖你的style。尝试更改您的class如下。
.semi-red
{
background-color:#DC143C !important;
}
以下是您的方案的完整示例。
angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'name' },
{ name: 'age' },
{
name: 'gender',
cellClass: function (grid, row, col, rowIndex, colIndex) {
var val = grid.getCellValue(row, col);
if (val === 'male') {
return 'semi-red';
}
}
}
]
};
$scope.gridOptions.data = [
{
"name": "PK",
"age": 30,
"gender": "male"
},
{
"name": "Meredith",
"age": 26,
"gender": "female"
},
{
"name": "Miriam",
"age": 27,
"gender": "female"
}
];
}]);<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.css" />
<style>
.semi-red
{
background-color:#DC143C !important;
}
</style>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>