Question

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

我创建了一个简单的网格作为一个示例，在一列中有多个输入文本字段。您将如何处理编辑并保存对此网格的更改？使用Kendo + razor + c＃我能够保存包含8-9个变量的列中的更改。我无法理解如何使用角度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

这是一种非常天真的方式，没有任何检查。它只是为了说明你解决问题的方法。

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

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

可以找到工作人员here。

Answer 2

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

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

然后在你的HTML中，你做：

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

请参阅plunker

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

2 个答案: