我在我继承的应用中使用了此代码:
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.edit.on.afterCellEdit($scope,
function(rowEntity, colDef, newValue, oldValue) {
}
}
我更新了将数据绑定到UI网格的gridOptions对象,因此我希望为呈现更新数据的单元格触发afterCellEdit
回调。
这可能吗?
答案 0 :(得分:1)
在回答你的问题时,这就是当你在网格之外更新任何网格数据时,你会如何导致UI-Grid的afterCellEdit人工触发......
var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.gridData = [{"FirstName": "Matt", "LastName": "W", "Job": "Stack Overflow User"},
{"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}];
$scope.$watch('gridData', function(newValues, oldValues) {
for (var i = 0; i < newValues.length; i++) {
if (!angular.equals(newValues[i], oldValues[i])) {
for (var property in oldValues[i]) {
if (oldValues[i].hasOwnProperty(property)) {
if (oldValues[i][property] != newValues[i][property]) {
$scope.gridApi.edit.raise.afterCellEdit(newValues[i], null, newValues[i][property], $scope.gridOptions.data[i][property]);
}
}
}
}
}
$timeout(function() {
$scope.gridOptions.data = angular.copy($scope.gridData);
});
}, true);
$scope.callbackData = {};
$scope.gridOptions = {
enableCellEditOnFocus: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.edit.on.afterCellEdit($scope,
function(rowEntity, colDef, newValue, oldValue) {
$scope.callbackData.oldValue = oldValue;
$scope.callbackData.newValue = newValue;
});
},
columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}]
};
}]);
button {
margin-bottom: 10px;
}
div[ui-grid] {
height: 115px;
margin-bottom: 10px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<button ng-click="gridData[0].LastName='Williams'">Guess Last Name</button>
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav></div>
<div>{{callbackData}}</div>
</div>
如果您有任何其他问题,请与我们联系。