AngularJS ui-grid，使列有条件编辑

Question

我使用AngularJS 1.5.5和ui-grid 3.2.6。

我有一个5列的网格.Col“4”是唯一可以使用dropdownEditor编辑的列，所有其他列都是不可编辑的。

我需要的是，如果col 4中的值发生变化，那么我需要使第5列可编辑。

我很熟悉cellEditableCondition。但是，我不确定我如何使用该财产来满足要求。

Answer 1

您可以在行实体上使用临时属性来跟踪第4列的更改。

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit']); 
var grid; 
app.controller('MainCtrl', ['$scope', function ($scope) { 

    var myData = [ 
    { 
     id1:"1",id2:"2",id3:"3",id4:"4",id5:"5", 
    },] 

    var cellEditable = function($scope){ 
    if($scope.row.entity.oldId4===undefined) 
     return false; 
    return $scope.row.entity.oldId4!=$scope.row.entity.id4; 
    } 

    $scope.gridOptions = { 
     enableFiltering: true, 
     onRegisterApi: function(gridApi){ 
     grid = gridApi; 
    }, 
    data: myData, 
    columnDefs:[ 
     { 
      field: 'id1', 
      displayName: "id1", 
      width: 100, 

     enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     }, 
     { 
      field: 'id2', 
      displayName: "id2", 
      width: 100, 

     enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     },{ 
      field: 'id3', 
      displayName: "id3", 
      width: 100, 
      enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     },{ 
      field: 'id4', 
      displayName: "id4", 
      width: 100, 
     enableCellEdit:true, 
     },{ 
      field: 'id5', 
      displayName: "id5", 
      width: 100, 
     enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     }, 

    ], 
} 
$scope.gridOptions.onRegisterApi = function(gridApi){ 
      //set gridApi on scope 
      $scope.gridApi = gridApi; 
      gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){ 
      rowEntity.oldId4 = oldValue; 
      $scope.$apply(); 
      }); 
     }; 

$scope.test = function() 
{ 
    window.alert("Cell clicked") 
} 
}]); 

这是一个工作plnkr。 http://plnkr.co/edit/wJfPkcBmpseaJjw20ct9?p=preview