AngularJS ui-grid, сделать столбец редактируемым условно

Я использую AngularJS 1.5.5 и ui-grid 3.2.6.

У меня есть сетка с 5 столбцами. Столбец «4» - единственный столбец, редактируемый с помощью dropdownEditor, все остальные столбцы не редактируются.

Мне нужно, если значение в столбце 4 изменится, мне нужно сделать столбец 5 редактируемым.

Я знаком с cellEditableCondition. Но я не уверен, как я могу использовать это свойство для удовлетворения требований.


angularjs angular-ui-grid ui-grid
person KB.    schedule 17.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать временное свойство объекта строки для отслеживания изменений столбца 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")
 }
}]);

Вот рабочий плнкр. http://plnkr.co/edit/wJfPkcBmpseaJjw20ct9?p=preview

person Kathir    schedule 20.08.2016
comment
Спасибо, Катир. Это именно то, что я искал. - person KB.; 20.08.2016