我在理解通过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
是我的数据。是否有不同的方法将该选择发送到控制器以进行删除?我目前的方式不起作用(显然)。任何帮助将不胜感激。如果我的标记不完整,我会根据需要更新它。谢谢!
答案 0 :(得分: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。
答案 1 :(得分:1)
ui-grid
在array.splice()
方法
此方法存在一个问题,即使用已删除的行或项目替换数组。
$scope.gridOptions.data.splice(index,1)
因此处理删除行的更好方法是做两件事
第1步:
$scope.gridApi.core.setRowInvisible(row)
上面的行将隐藏选定的行
步骤2:调用删除数据库中数据的服务
答案 2 :(得分: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);
}
});
});
};
希望它有所帮助!
答案 3 :(得分: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
}
也许这有帮助?
答案 4 :(得分: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');
}
答案 5 :(得分: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
});
});
}
&#13;