在 ui-grid 3.0 中标记修改的单元格/行 $dirty答案

【问题标题】：Marking modified cell/row $dirty in ui-grid 3.0在 ui-grid 3.0 中标记修改的单元格/行 $dirty
【发布时间】：2015-12-15 00:01:04
【问题描述】：

我有一个几乎就像它应该的那样的 plunker。我必须向它添加一项要求，但我在文档或谷歌上找不到它。

设置网格（类似于 Excel），您可以在其中开始编辑，并且 Tab 键将逐行移动。如果进行了更改，我需要某种方式将单元格标记为 $dirty。

如果有任何更改，需要一个更新按钮来保存整个网格（再次，他想要它就像 Excel 一样）。

这是plunker。

问题：双击一个可编辑单元格（名称、状态、M、T、W、H、F），Tab 键将在整个网格中循环。如果单元格值发生更改，我需要一种方法将其标记为脏！

代码： (index.html)

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="lodash.js@*" data-semver="3.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <strong>Data Length:</strong>
 {{ gridOptions.data.length | number }}
        <br />
      <strong>Last Cell Edited:</strong>
 {{msg.lastCellEdited}}
        <br />
      <div ui-grid="gridOpts" ui-grid-edit="" ui-grid-cellnav="" class="grid"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

(app.js)

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

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.$scope = $scope;
  $scope.pending_view = true;
  $scope.gridOpts = {
    enableCellEditOnFocus: true,
    enableGridMenu: true
  };

   var dataset = [{
    vote_pending: false,
    has_comment: false,
    is_stale: false,
    is_watched: false,
    disbursement_issue: false,
    name: "Jon",
    status: 1,
    M: 9,
    T: 9,
    W: 9,
    H: 9,
    F: 4
  }, {
    vote_pending: true,
    has_comment: true,
    is_stale: true,
    is_watched: true,
    disbursement_issue: true,
    name: "Robbie",
    status: 1,
    M: 8,
    T: 8,
    W: 8,
    H: 8,
    F: 8
  }, {
    vote_pending: false,
    has_comment: false,
    is_stale: true,
    is_watched: true,
    disbursement_issue: false,
    name: "Brad",
    status: 1,
    M: 8,
    T: 8,
    W: 8,
    H: 8,
    F: 8
  }, {
    vote_pending: false,
    has_comment: true,
    is_stale: false,
    is_watched: false,
    disbursement_issue: false,
    name: "Paul",
    status: 1,
    M: 8,
    T: 8,
    W: 8,
    H: 8,
    F: 8
  }, {
    vote_pending: false,
    has_comment: true,
    is_stale: false,
    is_watched: true,
    disbursement_issue: false,
    name: "Billie",
    status: 2,
    M: 8,
    T: 4,
    W: 4,
    H: 4,
    F: 0
  }];

  $scope.getTotal=function(a, b, c, d, e) {
    return a+b+c+d+e;
  };

  $scope.gridweek = true;

  var sByName = _.sortBy(dataset, 'name');
  var sPending = _.sortByAll(dataset, ['is_watched', 'vote_pending', 'has_comment', 'disbursement_issue', 'is_stale']).reverse();

  $scope.gridOpts.data = sPending;

  $scope.pendingSort = function() {
    if($scope.gridOpts.data === sByName) {
      $scope.gridOpts.data = sPending;
    } else if($scope.gridOpts.data === sPending) {
      $scope.gridOpts.data = sByName;
    }
  };

  $scope.gridOpts.columnDefs = [
    {
      name: 'id',
      enableCellEdit: false,
      enableColumnMenu: false,
      headerCellTemplate: 'pending.hdr.html',
      cellTemplate: 'pending.icons.html',
      width: '15%'
    }, 
    {
      name: 'name',
      enableCellEdit: true,
      displayName: 'Name',
      cellClass: 'text-left cBlue',
      headerCellClass: 'text-center bGreen',
      enableColumnMenu: false,
      width: '12%'
    }, 
    {
      name: 'status',
      enableCellEdit: true,
      displayName: 'Status',
      editableCellTemplate: 'ui-grid/dropdownEditor',
      enableColumnMenu: false,
      cellClass: 'text-left cBlue',
      cellFilter: 'mapStatus',
      headerCellClass: 'text-center bGreen',
      editDropdownValueLabel: 'status',
      editDropdownOptionsArray: [
        {
          id: 1,
          status: 'FT'
        }, 
        {
          id: 2,
          status: 'PT'
        }
      ],
      visible: $scope.gridweek,
      width: '14%'
    }, 
    {
      name: 'M',
      enableCellEdit: true,
      displayName: 'M',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right cBlue',
      headerCellClass: 'text-center bGreen',
      width: '8%'
    }, 
    {
      name: 'T',
      enableCellEdit: true,
      displayName: 'T',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right cBlue',
      headerCellClass: 'text-center bGreen',
      width: '8%'
    }, 
    {
      name: 'W',
      enableCellEdit: true,
      displayName: 'W',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right cBlue',
      headerCellClass: 'text-center bGreen',
      width: '8%'
    },
    {
      name: 'H',
      enableCellEdit: true,
      displayName: 'H',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right cBlue',
      headerCellClass: 'text-center bGreen',
      width: '8%'
    },
    {
      name: 'F',
      enableCellEdit: true,
      displayName: 'F',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right cBlue',
      headerCellClass: 'text-center bGreen',
      width: '8%'
    },
    {
      field: 'total',
      enableCellEdit: false,
      displayName: 'Total',
      enableColumnMenu: false,
      type: 'number',
      cellFilter: 'number:1',
      cellClass: 'text-right',
      headerCellClass: 'text-center bGreen',
      cellTemplate: 'total.tmpl.html',
      width: '10%'
    }
  ];

  $scope.msg = {};

  $scope.gridOpts.onRegisterApi = function(gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
      $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
      $scope.$apply();
    });
  };
}])

.filter('mapStatus', function() {
  var statusHash = {
    1: 'Full Time',
    2: 'Part Time'
  };

  return function(input) {
    if (!input) {
      return '';
    } else {
      return statusHash[input];
    }
  };
});

【问题讨论】：

您已经在使用gridApi.edit.on.afterCellEdit，您可以获得新旧值。那么有什么问题呢？
我只是不知道如何“标记”单元格或行

标签： angularjs angular-ui-grid

【解决方案1】：

我在作用域上创建了一个脏标志：

$scope.dirty = false;

我更新了监控版本的功能：

gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
  $scope.$apply(function(scope) {
    scope.dirty = true;
  });
});

请在 plunkr 上查看：http://plnkr.co/edit/bSTXqp7wzLDL74rN3PII?p=preview

【讨论】：

这是一个干净简洁的解决方案。但是，我至少需要指示更改所在行的单元格。

【解决方案2】：

尝试在数据集顶部添加一个薄层以跟踪记录脏状态。

var records = [];
angular.forEach(dataset, function (rawdata) {
    var record = {};
    //Track changed attrs, 
    //keys are the changed properties and 
    //values are an array of values [origValue, newValue].
    record.changedAttrs = {};

    //record dirty status
    Object.defineProperty(record, 'isDirty', {
        get: function () {
            return Object.getOwnPropertyNames(record.changedAttrs).length > 0; 
        }
    }); 

    angular.forEach(rawdata, function (value, key) {
        Object.defineProperty(record, key, {
            get: function () {
                return rawdata[key];  
            },

            set: function (value) {
                var origValue = record.changedAttrs[key] ? 
                    record.changedAttrs[key][0] : rawdata[key];

                if(value !== origValue) {
                    record.changedAttrs[key] = [origValue, value];
                } else {
                    delete record.changedAttrs[key];  
                }
                rawdata[key] = value;
            }
        })      
    });
    records.push(record);  
});

这里是plunker。提供自定义行模板和额外一行css，行脏时行bg颜色会变为黄色。

rowTemplate: '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ' + 
'ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" ' + 
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader , \'row-dirty\': row.entity.isDirty}" ' + 
'role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>'

css

.ui-grid-cell.row-dirty {
    background-color: yellow !important;
}

【讨论】：

我肯定会将此标记为正确答案，但我有一次后续问题：不是在网格中添加一列，而是有一种 ui-grid 方法来添加背景颜色的光如果该记录已被修改，则为整行黄色？
您可以使用自定义 rowTemplate 根据 isDirty 属性更改行颜色，请参阅更新的答案和 plunker。

【解决方案3】：

除了梅林斯的回答。他的css风格对我不起作用。我所做的是：

.ui-grid-row-dirty div {
    background-color: yellow !important;
}

这会将每个单元格（行内）设置为黄色。

【讨论】：