在 ui-grid 中处理筛选器事件

Question

我在我的应用程序中使用角度ui-grid来显示数据。我有 colmnDef 设置如下。

$scope.grid =
data: 'userList'
enableColumnResizing: true
enableFiltering: true
enableRowSelection: true
enableRowHeaderSelection: false
enableSorting: true
minRowsToShow: 30
multiSelect: false
columnDefs: [
  {
    name: 'id'
    field: 'id'
    displayName: 'ID'
    enableFiltering: false
    maxWidth: 100
  }
  { name: 'username', field: 'email' }
  { name: 'firstName', field: 'first_name' }
  { name: 'lastName', field: 'last_name' }
  { name: 'lastLoggedIn', field: 'last_sign_in_at', cellFilter: 'date : "medium"', enableFiltering: false }
  { name: 'locked', field: 'locked', displayName: 'Locked?', enableFiltering: false, maxWidth: 100 }
  {
   name: 'Impersonate',
   cellTemplate: '<a class="small-button" ng-controller="AuthController" ng-click="impersonateUser({{row.entity.id}})">
    <i class="fa fa-users"></i></a>',
   enableFiltering: false,
   enableSorting: false,
   visible: $scope.hideImpersonate
  }
  {
    name: 'Edit'
    cellTemplate: '<a href="/admin/users/{{row.entity.id}}/edit" class="small-button"><i class="pencil-icon"></i></a>'
    enableFiltering: false
    enableSorting: false
    width: 100
  }
  {
    name: 'Delete'
    cellTemplate: deleteCellTemplate1 + deleteCellTemplate2
    enableFiltering: false
    enableSorting: false
    width: 100
  }
]
onRegisterApi: (gridApi) -> $scope.gridApi = gridApi

当用户搜索上面提到的不存在的"用户名"时，我想在网格中显示消息"未找到数据"。
我尝试遵循代码，但它对我不起作用。我想知道对此的更好方法。

$scope.grid.$on('ngGridEventFilter', function(){
  console.log('filter called');
});

Answer 1

哇，似乎这应该更容易完成......经过大量的搜索，我找到了一种确定结果数量的方法是使用gridApi.grid.renderContainers.body.visibleRowCache对象。

所以我在 ui-grid 教程中修改了过滤器示例 plunker，并结合了他们的一个 github 问题线程中描述的技术。

要完成它，您可以将条件div 排除到 ui-griddiv 中，并在找不到结果时显示它：

<div id="grid1" ui-grid="gridOptions" class="grid">
    <div class="no-rows" ng-if="noFilteredResults">
        <div class="msg">
            <span>No Data Found</span>
        </div>
    </div>
</div>

在控制器中，您必须在gridApi.grid.renderContainers.body.visibleRowCache对象上设置$watch：

  $scope.noFilteredResults = false;
  $scope.$watch(function() { return $scope.gridApi.grid.renderContainers.body.visibleRowCache.length; }, 
      function(newVal, oldVal) {
          if ( newVal === 0 ) {
              $scope.noFilteredResults = true; 
              console.log('no rows!');
          } else {
              $scope.noFilteredResults = false;
          }
     }); 

如果有更简单的方法来完成它，那么找到:)并不容易希望对您有所帮助！