angular UI-Grid - 如何根据值更改单元格的颜色
angular UI-Grid - How to change the color of the Cell based on the value
我是 Angular 和 UI 网格的新手 我试图在显示特定值时为 UI 网格的单元格着色 我正在使用cellcalss 属性 在 GridOptions
的 columndef 中
$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>
我是 Angular 和 UI 网格的新手 我试图在显示特定值时为 UI 网格的单元格着色 我正在使用cellcalss 属性 在 GridOptions
的 columndef 中 $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>