角度网格验证单元格值

How would I highlight a cell be colored red if gender == "male" instead of a row. This code currently highlights the whole row, but I want it to highlight only a particular cell. This code is taken from this UI Grid tutorial.

如果性别==“男性”而不是一行,我如何突出显示红色的单元格。此代码当前突出显示整行,但我希望它仅突出显示特定单元格。此代码取自此UI网格教程。

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer', 'ui.grid.rowEdit', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
  $scope.data = [];
  $scope.gridOptions = {
    enableGridMenu: true,
    importerDataAddCallback: function(grid, newObjects) {
      $scope.data = $scope.data.concat(newObjects);
    },
    onRegisterApi: function(gridApi) { 
      $scope.gridApi = gridApi;
      gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
    },
    data: 'data'
  };

  $scope.saveRow = function(rowEntity) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval(function() {
      if (rowEntity.Gender === 'male') {
        promise.reject();
      } else {
        promise.resolve();
      }
    }, 3000, 1);
  };

  var handleFileSelect = function(event) {
    var target = event.srcElement || event.target;

    if (target && target.files && target.files.length === 1) {
      var fileObject = target.files[0];
      $scope.gridApi.importer.importFile( fileObject );
      target.form.reset();
    }
  };
};

import.json

[
  {"name":"John Smith", "gender":"male", "company":"TestIcon"},
  {"name":"Jane Doe", "gender":"female", "company":"FastTruck"}
]

1 个解决方案

#1

If you just want to dynamically highlight a cell, regardless of any validation stuff, you can provide a function to the cellClass property on your column definition:

如果您只想动态突出显示一个单元格,无论是否有任何验证内容,您都可以为列定义上的cellClass属性提供一个函数:

{
  field: 'gender',
  cellClass: function (grid, row, col, rowIndex, colIndex) {
    var val = grid.getCellValue(row, col);
    if (val === 'male') {
      return 'blue';
    }
    else if (val === 'female') {
      return 'pink';
    }
  }
}

There's a plunker for this specific example: http://plnkr.co/edit/kbZfVKkSTKGuD9XiDz1f?p=preview, and a longer write-up if you want more information: http://brianhann.com/customize-ui-grid-with-dynamic-cell-classes/

这个特定的例子有一个关于这个例子:http://plnkr.co/edit/kbZfVKkSTKGuD9XiDz1f?p=preview,如果你想了解更多信息还需要更长时间的写作:http://brianhann.com/customize-ui-grid-与动态细胞类/