如何访问网格的过滤大小

How do I access the filtered size of the grid?

本文关键字：过滤 网格 何访问 访问      更新时间：2023-09-26

我正在使用ng网格。我正在使用过滤器。我有那么多功能正常。现在我想（通过编程）知道网格中还有多少项。

我在github上挖掘了源代码，发现该值存储为：

grid.renderContainers.body.visibleRowCache.length;

但我还没能弄清楚如何访问这个变量，特别是网格之外JS中的grid对象。

其他SO答案包括这样的代码：

angular.element($("#gridDiv")).scope()

当代码工作时，它访问范围（我在JS中已经可以访问该范围），而不是网格中使用的数据。有没有一种方法可以访问网格中的javascript对象？

样品Plunker

在gridOptions中环顾四周，我发现了一个名为filteredRows的对象。所以你可以这样得到你想要的长度：

$scope.gridOptions.ngGrid.filteredRows.length

请看下面或更新后的plunkr中的演示。

（onRegisterApi只是一个测试，不需要它。）

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
                     
    $scope.filter = {filterText:''};
    $scope.gridOptions = {
      data: 'myData',
      enableFiltering: true,
    filterOptions: $scope.filter,
    showFilter: true,
    onRegisterApi: function( gridApi ) {
          $scope.gridApi = gridApi;
          $scope.gridApi.core.on.filterChanged( $scope, function() {
            console.log($scope.gridApi);
          });
    }
  };
  
  $scope.showRowCount = function() {
    console.log($scope.gridOptions.ngGrid.filteredRows.length);
  }
});
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}
<link href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
      <input ng-model="filter.filterText"/>
      <button ng-click="showRowCount()">How many rows have been filtered</button>
        <div class="gridStyle" ng-grid="gridOptions"></div>
        currently visible items: {{gridOptions.ngGrid.filteredRows.length}}
    </div>

相关文章：