如何正確刪除所選項目ui.grid Angular JS

Question

我在理解通過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); 
       } 

      }); 

其中displayValue是我的專欄的一個屬性，$scope.myData是我的數據。是否有其他方式將選擇發送給控制器以進行刪除？目前的方式我不知道（顯然）。任何幫助將不勝感激。如果我的標記不完整，我會根據需要更新它。謝謝！

Answer 1

您的解決方案看起來有點複雜。這裏是我的刪除功能：

$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。

Answer 2

我不知道如何正確的我的解決辦法是，但這裏是我的代碼（也許它可以引導一個人在正確的方向，或者如果他們有更好的方法，請分享:)）

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

      }); 

     }); 
    }; 

希望它能幫助別人！

Answer 3

我有一個按鈕，看起來像這樣，我在我的網格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 
} 

也許這有幫助嗎？

Answer 4

ui-grid有問題array.splice()方法

此方法是給予其使得陣列由已刪除的行或項目置換的問題。

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

所以更好的方式來處理刪除行的是做兩件事情

• 第1步：

  $scope.gridApi.core.setRowInvisible(row) 
  

  線之上，將隱藏選定行

• 步驟2：調用刪除數據庫中的數據的服務

Answer 5

 // $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'); 
     } 

Answer 6

要回答@Kevin聖人回答延長@迪利普的查詢。此方法使用服務向服務器發送刪除請求，並且只有在收到成功響應後才刪除該行。如果出現問題並且記錄仍在數據庫中，則不希望從網格中刪除該行。

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