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

Question

在 ui-grid 单元格中尝试保存更改时，我无法理解从哪里开始 template.When 我完成了 Ui-Grid 教程，我发现的是当单个字段映射到列时如何保存更改：http://ui-grid.info/docs/#/tutorial/201_editable。

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

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

这是我的简单网格示例的 link：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

如果你想使用他们的编辑功能，你必须将它注入你的模块：

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

然后在您的 html 中，您会：

<div ui-grid="gridOptions" class="grid" ui-grid-edit></div>

见plunker

Answer 2

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

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

$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。

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

How to save changes in Angular UI-Grid when using cell template?

angularjs

angular-ui-grid