AngularJS 和 ng-grid - 单元格更改后自动将数据保存到服务器

Question

我的用例非常简单。用户在编辑单元格(enableCellEdit:true)后，应该将数据“自动”发送到服务器(在单元格模糊时)。我尝试了不同的方法，但没有一个能正确解决问题。我有一个简约的网格:

// Configure ng-grid
$scope.gridOptions = {
    data: 'questions',
    enableCellSelection: true,
    selectedItems: $scope.selectedRow,
    multiSelect: false,
    columnDefs: [
        {field: 'id', displayName: 'Id'},
        {field: 'name', displayName: 'Name'},
        {field: 'answers[1].valuePercent', displayName: 'Rural', enableCellEdit: true}
    ]
};

例如，我尝试查看传递到网格的数据模型。但这样做不会返回我编辑过的单元格:

$scope.$watch('myData', function (foo) {
    // myModel.$update()
}, true);

我试图摆弄“ngGridEventData”数据事件，但它在单元格编辑后不会触发

$scope.$on('ngGridEventData', function (e, gridId) {
    // myModel.$update()
});

最后，我尝试观察一个 Cell。但是，这仅适用于网格的“selectedCell”属性的行:

$scope.selectedRow = [];

$scope.gridOptions = {
    selectedItems: $scope.selectedRow,
}

$scope.$watch('selectedRow', function (foo) {
    console.log(foo)
}, true);

是ng-grid plugin吗？需要吗？我不敢相信这不是开箱即用的东西。

您能给我一个如何解决自动保存/发送到服务器的指针/片段吗？

Answer 1

也许这是新的，但 ng-grid 实际上发布了可用于实现简单的更改更新的事件。

事件引用:https://github.com/angular-ui/ng-grid/wiki/Grid-Events

示例代码(添加到设置网格的 Controller ):

$scope.$on('ngGridEventEndCellEdit', function(evt){
    console.log(evt.targetScope.row.entity);  // the underlying data bound to the row
    // Detect changes and send entity to server 
});

需要注意的一件事是，即使没有进行任何更改，该事件也会触发，因此您可能仍然需要在发送到服务器之前检查更改(例如通过“ngGridEventStartCellEdit”)