Làm cách nào tôi có thể thực hiện việc nhấp vào một nút trong bảng ng-lưới xóa một hàng khỏi mô hình?

Question

Tôi đã thiết lập sau đây với ng-lưới:

var gridData = {}; 
    $scope.gridOptions = { 
     data: 'gridData', 
     enableCellEdit: true, 
     multiSelect: false, 
     columnDefs: [ 
      { field: 'testId', displayName: 'Test Id' }, 
      { field: 'name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
      { field: 'description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
      { field: '', cellTemplate: '<button ng-click="delete(row)">Delete</button>' } 
     ] 
    }; 

và:

$scope.delete = function (row) { 
     row.entity.$deleteData({ testId: row.entity.testId }); 
    } 

này gửi một thông điệp HTTP đến máy chủ mà xóa hàng. Tuy nhiên, hàng vẫn còn trong lưới. Làm thế nào tôi có thể làm cho nó để bấm vào nút xóa trên một hàng cũng xóa một hàng từ đối tượng gridData?

Answer 1

Giống như Valentyn Shybanov đã đề cập trong nhận xét của mình, bạn nên kiểm tra xem máy chủ có xóa thành công đối tượng trong cơ sở dữ liệu hay không và xóa khỏi mảng gridData.

$scope.delete = function(row) { 
    row.entity.$deleteData({testId:row.entity.testId}) 
     .then(function(response) { 
      if (response.status === 'OK') { 
       remove($scope.gridData, 'testId', row.entity.testId); 
      } 
     }); 
} 

// parse the gridData array to find the object with testId 
function remove(array, property, value) { 
    $.each(array, function(index, result) { 
     if (result[property] == value) { 
      array.splice(index, 1); 
     } 
    });  
}); 

Các "Hủy bỏ chức năng" được lấy từ: https://stackoverflow.com/a/6310763/1036025

Answer 2

Dưới đây là một Plunker cho phiên bản mới nhất (3.0.0rc20) của ui-lưới để tạo ra một nút hàng cụ thể (ví dụ: chỉnh sửa, xóa vv) :

http://plnkr.co/edit/l7oOIe4w3XzKOnMUGDdr?p=preview

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

app.controller('MainCtrl', function($scope) { 

    $scope.gridScope = $scope; 

    $scope.gridOptions = { 
    data: [{ 
     firstName: 'Frank', 
     lastName: 'Zappa' 
    }, { 
     firstName: 'Giuseppe', 
     lastName: 'Verdi' 
    }, { 
     firstName: 'Mos', 
     lastName: 'Def' 
    }], 
    columnDefs: [{ 
     field: 'firstName', 
     displayName: 'First' 
    }, { 
     field: 'lastName', 
     displayName: 'Last' 
    }, { 
     field: 'edit', 
     cellTemplate: '<button id="editBtn" type="button" class="btn-small glyphicon glyphicon-pencil" ng-click="grid.appScope.editUser(row.entity)" ></button> ' 
    }] 
    }; 

    $scope.editUser = function(data) { 
    alert('Edit ' + data.firstName + ' ' + data.lastName); 
    } 
}); 

Nó chỉ sử dụng Bootstrap cho nút glyph. Nếu không, bạn chỉ có thể sử dụng Angular với ui-grid.

này được dựa trên một lưu ý quan trọng trong README nâng cấp cho ui-grid:

https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Có vẻ như họ đã được cải thiện trên rất khó hiểu (ít nhất là đối với tôi!) "GetExternalScopes()" những thứ đã từng được sử dụng để thực hiện công việc này.