ui 网格将更新的单元格数据保存到数据库
ui grid save updated cell data to database
我正在研究 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;
});
}])
将以下内容添加到您的控制器:
$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
进行比较以查看内容是否真的已更改) .
您不需要重新加载数据,因为更改已经应用于范围。
在这里找到 forked Plunker。
你问题的第二部分:
None 行可选择。这可能会变得有点复杂。请开始一个关于这个问题的新问题(使用新的 Plunker)。
我正在研究 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;
});
}])
将以下内容添加到您的控制器:
$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
进行比较以查看内容是否真的已更改) .
您不需要重新加载数据,因为更改已经应用于范围。
在这里找到 forked Plunker。
你问题的第二部分:
None 行可选择。这可能会变得有点复杂。请开始一个关于这个问题的新问题(使用新的 Plunker)。