4

我在理解通过 ui-grid 可用的属性/功能时遇到了一些困难。我经常对它以前的版本 ng-grid 感到困惑。我试图找到删除选中条目的最佳方法是什么。这是我的标记，但由于不太了解我是否有索引或可通过行实体获得的计数：

HTML：

       <div class="form-group">
          <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
          <button type="button" id="removeData" class="btn btn-success" ng-click="removeData()">Remove First Row</button>
          <br>
          <br>
          <div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-selection external-scopes="myViewModel" class="grid"></div>
    </div>

它位于我的控制器之下：

 $scope.removeData = function () {
        console.log($scope.gridApi.selection.getSelectedRows());

        var items = $scope.gridApi.selection.getSelectedRows();

        angular.forEach($scope.myData, function (data, index) {
            angular.forEach(items, function (item) {
                if (item.displayValue = data.displayValue)
                {
                    $scope.myData.splice(index, 1);
                }

            });

wheredisplayValue是我的专栏的一个属性，$scope.myData是我的数据。是否有其他方法可以将该选择发送到控制器以进行删除？我目前的方式不起作用（显然）。任何帮助将不胜感激。如果我的标记不完整，我会根据需要进行更新。谢谢！

4

6 回答 6

11

您的解决方案看起来有点复杂。这是我的删除功能：

$scope.deleteSelected = function(){
  angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
    $scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);
  });
}

这是一个基于 210_selection 教程的 plunker 。

于 2014-12-10T01:14:04.307 回答
1

ui-gridarray.splice()方法有问题

此方法给出了一个问题，即使数组被删除的行或项目替换。

$scope.gridOptions.data.splice(index,1)

所以处理删除行的更好方法是做两件事

  • 步骤1：

    $scope.gridApi.core.setRowInvisible(row)

    上面的行将隐藏选定的行

  • 步骤 2：调用删除数据库中数据的服务

于 2014-12-15T12:32:36.143 回答
0

我有一个看起来像这样的按钮，我在我的网格 columnDefs 中的 cellTemplate 值中指定它...

columnDefs: [
        // snipped other columns
{ name: '_delete', displayName: '', width: '5%', cellTemplate: '<div class="ui-grid-cell-contents ng-binding ng-scope"><button class="btn btn-danger btn-xs btn-block" ng-click="getExternalScopes().delete($event, row)"><span class="glyphicon glyphicon-trash"></span></button></div>', enableFiltering: false, disableColumnMenu: true }

我的控制器有一行（IIRC）使 getExternalScopes() 调用工作

$scope.$scope = $scope;

然后我处理我在控制器中触发的删除事件......

$scope.delete = function (event, row) {
    MyService.Delete({ action: row.entity.MyIdField }); // tells the server to delete the entity
    $scope.gridApi.core.setRowInvisible(row); // hides that row in the UI
}

也许这有帮助？

于 2014-12-09T20:52:18.603 回答
0

我不知道我的解决方案有多合适，但这是我的代码（也许它可以引导某人朝着正确的方向前进，或者如果他们有更好的方法，请分享:)）

        $scope.removeData = function () {

        angular.forEach($scope.gridOptions.data, function (data) {

            angular.forEach($scope.gridApi.selection.getSelectedRows(), function (entity, index) {
                if (entity.$$hashKey == data.$$hashKey) {
                    $scope.gridApi.selection.unSelectRow(entity);
                    //timeout needed to give time to the previous call to unselect the row,
                    //then delete it
                    $timeout(function () {
                        $scope.gridOptions.data.splice($scope.gridOptions.data.indexOf(entity), 1);
                    }, 0,1);
                }

            });

        });
    };

希望它可以帮助某人！

于 2014-12-09T15:41:02.413 回答
0

回答@dileep 在@Kevin Sage 答案上扩展的查询。此方法使用服务向服务器发送删除请求，并且仅在收到成功响应后才删除该行。如果出现问题并且记录仍在数据库中，您不希望从网格中删除该行。

$scope.deleteSelected = function(){

    angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
        YourService.delete({
                id: data.id
            }, function(response) {
                $scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);
            }, function(error) {
            // Run any error code here
        });
    });
}

于 2016-08-12T13:18:18.163 回答
0 
      //  $scope.gridApi.grid.cellNav.lastRowCol = null;
        $scope.gridApi.grid.cellNav.focusedCells = [];

        var cells = $(".ui-grid-cell");
      //  var focused = $(".ui-grid-cell-focus");
        for (var i = 0; i < cells.length; i++) {
            var div = $(cells[i].children[0]);
            div.removeClass('ui-grid-cell-focus');
        }
于 2015-08-04T15:28:43.257 回答