angularjs - 使用单元格模板时如何保存 Angular UI-Grid 中的更改？

Question

在尝试保存 ui-grid 单元格模板中的更改时，我无法理解从哪里开始。当我浏览 Ui-Grid 教程时，我发现的是当单个字段映射到专栏:http://ui-grid.info/docs/#/tutorial/201_editable .

我创建了一个简单的网格作为示例，它在一列中有多个输入文本字段。您将如何编辑和保存对此网格的更改？使用 Kendo + razor + c# 我能够将更改保存在一个包含 8-9 个变量的列中。我无法理解如何使用 Angular ui-grid 执行此操作。

总而言之，我希望用户在完成网格中的数据编辑后单击网格外部的单个保存按钮。

这是我的简单网格示例的链接:http://plnkr.co/edit/IeYWL62Oa182crRUEtX4?p=info

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

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.gridOptions = {
      rowHeight: 40,
      enableHorizontalScrollbar: 0,
      enableVerticalScrollbar: 0,
    };

    $scope.gridOptions.columnDefs = 
    [{ name: 'id', width: 35},
     { name: 'template',
       cellTemplate: '<div><input type="text" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                     '<div><input type="text" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
    ];

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

Answer 1

这是一种非常幼稚的方式，没有任何检查。它只是向您说明解决问题的方法。

以下代码段将跟踪表中已更改的对象。请记住，没有进行任何检查，您仍然需要过滤 double ，删除可能已撤消更改的对象等......

$scope.arrayOfChangedObjects = [];

$scope.objectHasChanged = function(object) {
    $scope.arrayOfChangedObjects.push(object);
}; 

然后是保存函数。

$scope.save = function() {
  for(var i = 0; i < $scope.arrayOfChangedObjects.length; i++) {
      //do the saving
  }
};

调整您的模板以调用这些方法。注意 grid.appScope.method()!

$scope.gridOptions.columnDefs = 
[{ name: 'id', width: 35},
 { name: 'template',
   cellTemplate: '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                 '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
];

当然要让 ui-grid 知道你正在使用编辑模块

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

<div ng-controller="MainCtrl">
  <button ng-click="save()">save</button>
  <div ui-grid="gridOptions" class="grid" ui-grid-edit></div>
</div>

可以找到工作的 plunker here .