Question

我使用ng-grid设置了以下内容：

    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>' }
        ]
    };

和

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

这会向服务器发送一条HTTP消息，删除该行。不过排了仍然留在网格中。如何点击删除按钮在一行还删除gridData对象中的一行？

Answer 1

像 Valentyn Shybanov 在评论中提到的那样，您应该检查服务器是否成功删除了数据库中的对象，然后将其从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);
        }
    });    
});

“删除功能”取自：https://stackoverflow.com/a/6310763/1036025

Answer 2

这是一个用于ui-grid的最新版本（3.0.0rc20）的Plunker，可以创建一个特定于行的按钮（即编辑，删除等）：

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

它只使用Bootstrap作为字形按钮。否则你可以使用Angular和ui-grid。

这是基于ui-grid的升级自述文件中的重要注意事项：

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

似乎他们已经改进了非常混乱（至少对我来说！）“getExternalScopes（）”以前用来做这项工作的东西。

如何单击ng-grid表中的按钮从模型中删除一行？

2 个答案: