[英]How to properly delete selected items ui.grid Angular JS
我在理解通過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
是我的數據。 是否有不同的方法將該選擇發送到控制器以進行刪除? 我目前的方式不起作用(顯然)。 任何幫助將不勝感激。 如果我的標記不完整,我會根據需要更新它。 謝謝!
您的解決方案看起來有點復雜。 這是我的刪除功能:
$scope.deleteSelected = function(){
angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
$scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);
});
}
這里是一個plunker基礎上,210_selection教程。
ui-grid
有array.splice()
方法的問題
此方法給出了一個問題,即將數組替換為已刪除的行或項。
$scope.gridOptions.data.splice(index,1)
所以處理刪除行的更好方法是做兩件事
第1步:
$scope.gridApi.core.setRowInvisible(row)
上面的行將隱藏選定的行
步驟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);
}
});
});
};
希望它能幫助別人!
我有一個看起來像這樣的按鈕,我在網格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
}
也許這有幫助嗎?
// $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');
}
回答@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 }); }); }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.