Question

我是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;
}

但是红色没有显示，有人请指出我在这段代码中做错了什么

Answer 1

默认单元格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-Grid - 如何根据值更改Cell的颜色

1 个答案: