AngularJS 和 ng-grid - 在单元格更改后自动将数据保存到服务器 [英] AngularJS and ng-grid - auto save data to the server after a cell was changed

问题描述

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

My Use Case is pretty simple. A User, after editing a Cell (enableCell true), should have the data "automatically" sent to the server (on cell blur). I tried different approaches but none of them have properly worked out. I have a minimalistic grid:

// 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}
    ]
};

例如，我试图观察传递给 Grid 的数据模型.但这样做不会返回我编辑过的单元格:

For example, I tried to watch the data model passed to the Grid. But doing so won't return me the edited cell:

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

我试图摆弄ngGridEventData"数据事件，但它在单元格编辑后没有触发

I tried to fiddle with the "ngGridEventData" data event but it does not fire after cell edit

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

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

Finally, I tried to observer a Cell. However, this only work for a row by the mean of the "selectedCell" property of the grid:

$scope.selectedRow = [];

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

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

是否需要ng-grid 插件?我不敢相信这不是开箱即用的东西.

Is it a ng-grid plugin needed? I can't believe it is not something out of the box.

你有一个指针/片段如何解决自动保存/发送到服务器的问题吗?

Would you have a pointer / snippet how I could solve the auto save / send to the server?

推荐答案

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

Maybe this is new but ng-grid actually publishes events which can be used to implement a simple update on change.

事件参考:https://github.com/angular-ui/ng-grid/wiki/网格事件

示例代码(添加到设置网格的控制器):

Example code (add to controller where you setup the grid):

$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')

One thing to note is that the event will trigger even if no changes have been made, so you may still want to check for changes before sending to the server (for example via 'ngGridEventStartCellEdit')

这篇关于AngularJS 和 ng-grid - 在单元格更改后自动将数据保存到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！