11

我用 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 对象中删除一行？

4

2 回答 2

6

就像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

于 2013-04-11T18:37:11.467 回答
3

这是 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()”的东西。

于 2015-04-09T23:22:33.467 回答