javascript 如何正确删除选定的项目 ui.grid Angular JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26614641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly delete selected items ui.grid Angular JS
提问by Jose
I am having some difficulties understanding the properties/functions available through ui-grid. I often get confused with its previous version ng-grid. I am trying to find what the best way of deleting a checked-entry would be. Here is my markup, but due to not quite understanding if I have an index, or count available through a row entity:
我在理解通过 ui-grid 可用的属性/功能时遇到了一些困难。我经常对它以前的版本 ng-grid 感到困惑。我试图找到删除已检查条目的最佳方法是什么。这是我的标记，但由于不太了解我是否有索引或通过行实体可用的计数：
HTML:
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>
which lies under my controller:
在我的控制之下：
$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);
}
});
where displayValueis a property of my column and $scope.myDatais my data. Is there a different way to send that selection to the controller for removal? The current way I have it does NOT work (obviously). Any help will be appreciated. If my markup is incomplete, I'll update it as necessary. Thank you!
wheredisplayValue是我的列的属性，$scope.myData是我的数据。是否有不同的方式将该选择发送到控制器以进行删除？我目前的方式不起作用（显然）。任何帮助将不胜感激。如果我的标记不完整，我会根据需要进行更新。谢谢！
回答by Kevin Sage
Your solution looks a little complicated. Here is my delete function:
您的解决方案看起来有点复杂。这是我的删除功能：
$scope.deleteSelected = function(){
angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
$scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);
});
}
Here is a plunkerbased on the 210_selection tutorial.
这里是一个plunker基础上，210_selection教程。
回答by JP Bala Krishna
ui-gridhas problem with array.splice()method
ui-gridarray.splice()方法有问题
This method is giving a problem which is making array replaced by the deleted row or item.
此方法给出了一个问题，即使用已删除的行或项目替换数组。
$scope.gridOptions.data.splice(index,1)
So the better way to handle delete of a row is by doing two things
所以处理删除行的更好方法是做两件事
Step 1:
$scope.gridApi.core.setRowInvisible(row)The line above will hide the selected row
Step 2: Call the service which deletes the data at the database
步骤1：
$scope.gridApi.core.setRowInvisible(row)上面的行将隐藏选定的行
第二步：调用删除数据库数据的服务
回答by user5190331
// $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');
}
回答by Tim Head
To answer @dileep's query extending on @Kevin Sage answer. This approach uses a service to send a delete request to the server and only delete the row once a successful response has been received. You do not want to delete the row from the grid if something went wrong and the record is still on the database.
回答@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
});
});
}回答by Jose
I don't know how proper my solution is, but here is my code (maybe it can guide someone in the right direction or if they have a better method, please share :) )
我不知道我的解决方案有多合适，但这是我的代码（也许它可以指导某人朝着正确的方向前进，或者如果他们有更好的方法，请分享:)）
$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);
}
});
});
};
Hope it helps somebody!
希望它可以帮助某人！
回答by S. Baggy
I have a button that looks like this, which I specify in the cellTemplate value in my grid columnDefs...
我有一个看起来像这样的按钮，我在网格 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 }
My controller has a line which (IIRC) enables the getExternalScopes() call to work
我的控制器有一行 (IIRC) 使 getExternalScopes() 调用能够工作
$scope.$scope = $scope;
Then I handle the delete event I'm triggering like this in my controller...
然后我处理我在控制器中触发的删除事件......
$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
}
Perhaps this helps?
也许这有帮助？
