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

一尘不染

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

angularjs

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

我的工作代码

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

柱塞

阅读 181

2020-07-04

共1个答案

一尘不染

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

$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);
  });
};

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

所有你现在要做的就是打电话给你的REST API（以避免不必要的流量，你也可以比较newValue，以oldValue看是否真的内容变更）。

您不需要重新加载数据，因为更改已应用于范围。

在这里找到分叉的柱塞。

问题的第二部分：

您的所有行均不可选择。这可能会变得有些复杂。请对此问题发起一个新的问题（带有一个新的柱塞）。

2020-07-04