Angular 单元格值的网格验证

Question

如果 gender == "male" 而不是一行，我将如何突出显示红色的单元格。此代码当前突出显示整行，但我希望它仅突出显示 特定单元格 。此代码取自此UI Grid tutorial。

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"}
]

Answer 1

如果您只想动态突出显示一个单元格，而不考虑任何验证内容，您可以为列定义中的 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';
    }
  }
}

这个具体例子有一个 plunker：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/

Angular 单元格值的网格验证

Angular Grid Validation on cell value

javascript

angularjs

angular-ui-grid