Question

当我尝试删除ng-grid中的选定行时，删除的行仍显示在UI中。我的网格选项是

$scope.gridOptions = {
    data: 'myData',
    multiSelect: true,
    displaySelectionCheckbox: true,
    selectedItems: $scope.mySelections,
    showFooter: true,
    showColumnMenu:false,
    showFilter :false,
    enableCellEdit: false,
    enableCellSelection: false,
    enableRowSelection: false,
    showSelectionCheckbox: false,
    beforeSelectionChange: function() {
      return $scope.option.enableRowSelection;
    },

}

我使用

删除或拼接数据

$scope.removeItem=function(){   
    angular.forEach($scope.mySelections, function(row, index){
      angular.forEach($scope.myData, function(data, index){
        if(data.indexno == row.indexno){
          $scope.myData.splice(index,1);
          $scope.gridOptions.data = 'myData';
         console.log("after",$scope.myData);
         console.log("after data",$scope.gridOptions.data);
        }
      });
    });
    $(".badge").html($scope.mySelections.length);

}

请提出任何建议或解决方案

Answer 1

我删除行的方法是仅允许用户一次选择1行，但您可以将其设置为删除用户选择的所有内容。这是我用来实际删除的代码行

$scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);

但是我是这样做的。这是我的控制器顶部的网格选项，其中包含保存所选行的var。你可以把它作为一个选定行的数组！

$scope.selectedRow = null;
$scope.GridOptions = {
        enableSorting: true,
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        enableColumnResizing: true,
        columnDefs: [
          { name:'User Name', field: 'username', width: '15%', minWidth: 100},
          { name:'Dependency Key', field: 'id', width: '20%', minWidth: 100},
          { name:'Dependency File', field: 'file', width: '30%', minWidth: 100},
          { name:'Modified By', field: 'modifiedBy', width: '15%', minWidth: 100},
          { name:'Modified On', field: 'modifiedOn', width: '10%', minWidth: 100, cellTemplate:'<div class="ui-grid-cell-contents">{{grid.appScope.convertDate(row.entity.modifiedOn)}}</div>'},
          { name:'Dep. File Checksum', field: 'checksumAmericas', width: '10%', minWidth: 100}
        ],
        onRegisterApi : function(gridApi) {
                $scope.GridApi = gridApi;
            }
        };
$scope.GridOptions.multiSelect = false;

然后每次用户点击一行时都会调用此方法。我得到用户选择的行并将其分配给$ scope.selectedRow

 $scope.GridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.GridApi = gridApi;
              $scope.GridApi.selection.on.rowSelectionChanged($scope,function(row){
          if($scope.selectedRow == null)//user has not selected a row
              $scope.selectedRow = row;
          else if(row.entity.username == $scope.selectedRow.entity.username && row.entity.id == $scope.selectedRow.entity.id)//user clicked the same row that was selected and now has unselected
              $scope.selectedRow = null;
          else //user selected new row
              $scope.selectedRow = row;

    });
 };

然后当用户单击删除按钮时，它调用一个方法并在该方法内部检查$ scope.selectedRow是否为null然后从表中删除只是1行

if($scope.selectedRow != null)        
    $scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);

这个网站确实有助于ui-grid功能：

http://ui-grid.info/

http://ui-grid.info/docs/#/tutorial/210_selection

希望这有帮助

ui-grid删除所选行不起作用

1 个答案: