AngularJS ui-网格,使列有条件地可编辑
AngularJS ui-grid, make column editable conditionally
我正在使用 AngularJS 1.5.5 和 ui-grid 3.2.6。
我的网格有 5 个 columns.Col“4”是唯一可以使用下拉编辑器编辑的列,所有其他列都是不可编辑的。
我需要的是,如果第 4 列中的值发生变化,那么我需要使第 5 列可编辑。
我比较熟悉 cellEditableCondition。但是,我不确定如何使用 属性 来满足要求 ui 的要求。
您可以在行实体上使用临时 属性 来跟踪第 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
我正在使用 AngularJS 1.5.5 和 ui-grid 3.2.6。
我的网格有 5 个 columns.Col“4”是唯一可以使用下拉编辑器编辑的列,所有其他列都是不可编辑的。
我需要的是,如果第 4 列中的值发生变化,那么我需要使第 5 列可编辑。
我比较熟悉 cellEditableCondition。但是,我不确定如何使用 属性 来满足要求 ui 的要求。
您可以在行实体上使用临时 属性 来跟踪第 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