ui lưới lưu dữ liệu ô được cập nhật vào cơ sở dữ liệu

Question

Tôi đang làm việc trên tính năng ô chỉnh sửa lưới ui. Tôi cần cập nhật giá trị ô đã chỉnh sửa vào cơ sở dữ liệu bằng cách sử dụng api còn lại. Ngoài ra làm thế nào tôi có thể nhận được danh sách các hàng được lựa chọn trong bộ điều khiển.

mã làm việc của tôi

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

Answer 1

Thêm dòng sau để điều khiển của bạn:

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

Bạn có tất cả các thông tin về những cột đã được chỉnh sửa (trong colDef.name) và những gì giá trị thực tế của các ô là (trong rowEntity.xxx). Tất cả những gì bạn phải làm bây giờ là gọi API REST của bạn (để tránh lưu lượng không cần thiết, bạn cũng có thể so sánh newValue với oldValue để xem liệu nội dung đó có thực sự bị thay đổi hay không).

Bạn không cần tải lại dữ liệu vì các thay đổi đã được áp dụng cho phạm vi.

Tìm một số forked Plunker tại đây.

Phần thứ hai của câu hỏi của bạn:

Không thể chọn hàng nào. Và điều này có thể hơi phức tạp một chút. Hãy bắt đầu một câu hỏi mới (với một Plunker mới) về vấn đề này.