ui grid 将更新的单元格数据保存到数据库 [英] ui grid save updated cell data to database

问题描述

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

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.

我的工作代码

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

推荐答案

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

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

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

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).

您现在要做的就是调用您的 REST API(为了避免不必要的流量，您还可以将 newValue 与 oldValue 进行比较，看看内容是否真的发生了变化).

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).

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

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

在此处查找 分叉 Plunker.

问题的第二部分:

您的所有行都不可选.这可能会变得有点复杂.请针对此问题提出一个新问题(使用新的 Plunker).

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.

这篇关于ui grid 将更新的单元格数据保存到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！