AngularJS ui-grid, 조건부로 열 편집 가능

Question

AngularJS 1.5.5 및 ui-grid 3.2.6을 사용하고 있습니다.

5 개의 열이있는 격자가 있습니다. "4"는 dropdownEditor로 편집 가능한 유일한 열이며, 다른 모든 열은 편집 할 수 없습니다.

열 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