angularjs - Angular JS UI-Grid 删除行

Question

我是新手ui-grid，我正在尝试在 AngularJS 中实现一个表，如下图所示。我正在尝试选择一行并使用该特定行上的删除按钮将其删除。ui-grid文档要求我们使用，gridApi但我找不到足够的文档。

Answer 1

请在此处查看如何删除行的工作示例。 http://plnkr.co/edit/6TiFC6plEMJMD4U6QmyS?p=preview

关键是使用indexOf(row.entity)而不是依赖，row.index因为它不会动态更新。

$scope.deleteRow = function(row) {
  var index = $scope.gridOptions.data.indexOf(row.entity);
  $scope.gridOptions.data.splice(index, 1);
};

---

通用方法

function deleteRow(row,grid) {
   var i = grid.options.data.indexOf(row.entity);
   grid.options.data.splice(i, 1);
}

Answer 2

您可以使用@Blousie 解决方案，只要您将其适应新的 API：https ://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

现在“grid.appScope.edit(row.entity)”让您可以访问范围的“编辑”功能。

像这样的东西：

var removeTemplate = '<button class="btn btn-danger" ng-click="grid.appScope.removeRow(row)"><i class="glyphicon glyphicon-remove"></i></button>';

$scope.removeRow = function(row) {
    var index = $scope.<yourDataModelProperty>.indexOf(row.entity);
    if (index !== -1) {
        $scope.<yourDataModelProperty>.splice(index, 1);
    }
};

Answer 3

这里提供的其他解决方案对我不起作用（可能是因为我最新的不同版本的 ui-grid）。所以从范围数组中删除元素对我有用。这甚至应该适用于其他版本的 ui-grid，因为数据更改时必须更新网格。（感谢 Angular ！！！）

我正在使用 lodash 从数组中删除元素，这里是示例代码：

$scope.deleteRow = function(row){
    _.remove($scope.gridData, {
        id: row.id
    });
};

Answer 4

我们需要使用 $scope.grid.appScope。它适用于所有模板。除此之外，您需要从模板中发送行对象，以便您可以从网格数据中删除行。

jsfiddle：http: //jsfiddle.net/3ryLqa9e/4/

  cellTemplate:'<button class="btn primary" ng-click="grid.appScope.Delete(row)">Delete Me</button>' 

  $scope.Delete = function(row) {
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
        };

Answer 5

只需使用拼接从 ui-grids 数据源模型中删除要删除的行。

例如

$scope.myGridOptions.data.splice(<YOUR ROW INDEX HERE>, 1);