ui grid将更新的单元格数据保存到数据库

I am working on ui grid edit cell feature. I need to update the edited cell value to the database using rest api. Also how can i get the list of rows selected in controller.

我正在研究ui网格编辑单元格功能。我需要使用rest api将编辑的单元格值更新到数据库。另外,我如何获得在控制器中选择的行列表。

My working code

我的工作代码

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {  };

      $scope.gridOptions.columnDefs = [
        { name: 'id', enableCellEdit: false},
        { name: 'name' },
        { name: 'age', displayName: 'Age' , type: 'number', width: '10%' }
      ];


      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          $scope.gridOptions.data = data;
        });
    }])

Plunker

1 个解决方案

#1

Add the following to your controller:

将以下内容添加到您的控制器:

$scope.gridOptions.onRegisterApi = function(gridApi) {
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
    //Do your REST call here via $http.get or $http.post

    //Alert to show what info about the edit is available
    alert('Column: ' + colDef.name + ' ID: ' + rowEntity.id + ' Name: ' + rowEntity.name + ' Age: ' + rowEntity.age);
  });
};

You have all the information about which column was edited (in colDef.name) and what the actual values of the cells are (in rowEntity.xxx).

您拥有有关编辑哪个列的所有信息(在colDef.name中)以及单元格的实际值(在rowEntity.xxx中)。

All you have to do now is call your REST API (to avoid unnecessary traffic, you could also compare newValue to oldValue to see if the content really was changed).

您现在要做的就是调用REST API(为了避免不必要的流量,您还可以将newValue与oldValue进行比较,以查看内容是否确实已更改)。

You don't need to reload the data, because the changes are already applied to the scope.

您无需重新加载数据,因为更改已应用于范围。

Find a forked Plunker here.

在这里找到一个分叉的Plunker。

Second part of your question:

问题的第二部分:

None of your rows are selectable. And this may get a bit complicated. Please start a new Question (with a new Plunker) about this issue.

您的所有行都不可选。这可能会有点复杂。请针对此问题开始一个新问题(使用新的Plunker)。

#1