UI-GRID - 在行过滤后删除选定的行

Question

当从网格中筛选出这些行时，如何取消选择这些行？
angular-ui-grid 中是否有任何标志可以完成这项工作？类似于：

 gridOptions.removeSelectedAfterFilterd = true

Answer 1

要是有一个gridOptions.removeSelectedAfterFilterd = true就好了。

这是一个可行的替代方法：

var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    $scope.gridOptions = {
      enableFiltering: true,
      enableSelectAll: true,
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableFullRowSelection: true,
      showGridFooter: true,
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.filterChanged($scope, function() {
          $timeout(function() {
            angular.forEach($scope.gridApi.selection.getSelectedGridRows(), function(row) {
              if (!row.visible) $scope.gridApi.selection.unSelectRow(row.entity);
            });
          }, 10);
        });
      },
      columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}],
      data: [{"FirstName": "nir", "LastName": "OP", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "nir", "LastName": "OP", "Job": "Stack Overflow User"}]
    };
  }
]);

div[ui-grid] {
  height: 190px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
</div>

如果您还有其他问题，请告诉我，我们很乐意为您提供帮助。

Answer 2

喜欢 Tim Harker 的回答而无需添加“$timeout”

var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    $scope.gridOptions = {
      enableFiltering: true,
      enableSelectAll: true,
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableFullRowSelection: true,
      showGridFooter: true,
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.rowsVisibleChanged($scope, function() {
            angular.forEach($scope.gridApi.selection.getSelectedGridRows(), function(row) {
              if (!row.visible) {
                  $scope.gridApi.selection.unSelectRow(row.entity)
                  };
            });

        });
      },
      columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}],
      data: [{"FirstName": "nir", "LastName": "OP", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "nir", "LastName": "OP", "Job": "Stack Overflow User"}]
    };
  }
]);

div[ui-grid] {
  height: 190px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
</div>

UI-GRID - 在行过滤后删除选定的行

UI-GRID - Remove selected rows after row filtering

angularjs

angular-ui-grid