0
我使用AngularJS 1.5.5和ui-grid 3.2.6。AngularJS ui-grid,使列有條件編輯
我有一個5列的網格.Col「4」是唯一可以使用dropdownEditor編輯的列,所有其他列都是不可編輯的。
我需要的是,如果col 4中的值發生變化,那麼我需要使第5列可編輯。
我很熟悉cellEditableCondition。但是,我不確定我如何使用該財產來滿足要求。
我使用AngularJS 1.5.5和ui-grid 3.2.6。AngularJS ui-grid,使列有條件編輯
我有一個5列的網格.Col「4」是唯一可以使用dropdownEditor編輯的列,所有其他列都是不可編輯的。
我需要的是,如果col 4中的值發生變化,那麼我需要使第5列可編輯。
我很熟悉cellEditableCondition。但是,我不確定我如何使用該財產來滿足要求。
您可以在行實體上使用臨時屬性來跟蹤第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
謝謝Kathir。這正是我期待的。 –