在 UI.Grid (Angular) 中使用外部过滤没有结果时无法清除数据

Question

我正在使用angular-ui-grid ，它确实是一个强大的库。 我正在尝试使用 externalFiltering 选项来进行即时过滤。 我遵循了教程，但是当搜索没有返回任何数据时，我无法清除网格数据。

出于测试目的，我尝试像这样清空数据：

$scope.gridOptions.data = [{title: '', category: '', releaseYear: '', length: ''}];

它有效但不是真正干净的代码：/如果我没有清除数据的具体操作，旧数据已经存在（甚至通过uigrid api强制刷新）

完整代码如下

    angular.module('frontendApp').controller('MainCtrl', function ($scope, FilmService, uiGridConstants){

    var paginationOptions = {
      pageNumber: 1,
      pageSize: 25,
      sort: null
    };

    var lastCallFilter = '';

    $scope.gridOptions = {

      paginationPageSizes: [25, 50, 75],
      paginationPageSize: 25,
      enableFiltering: true,
      useExternalFiltering: true,
      useExternalPagination: false,
      useExternalSorting: false,
      columnDefs: [
        { name: 'title', width: '40%'},
        { name: 'category', field: 'category.name', enableFiltering: false},
        { name: 'releaseYear', enableFiltering: false},
        { name: 'length', enableFiltering: false}
      ]
      ,
      onRegisterApi: function( gridApi ) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.filterChanged($scope, function () {

          var grid = this.grid;
          lastCallFilter = grid.columns[0].filters[0].term

          // Check if a filter has been typed
          if (lastCallFilter){

            // Make a closure to keep value of lastCallFilter (keep in 'filter') during async process
            (function (filter) {

                // Make async call
                FilmService.querySummaryWithTitleFilter(filter).then(function (springDataResponse) {
                if(lastCallFilter == filter){

                  var data = springDataResponse._embeddedItems;
                  if (typeof(data) == "undefined") {

                   // ###################################################################
                   // If there is no data the data are cleared :( no really clean way... 
                   // ###################################################################   
                   $scope.gridOptions.data = [{title: '', category: '', releaseYear: '', length: ''}];

                  }
                  else {
                    // otherwise the data are updated
                    $scope.gridOptions.data = data;
                  }
                }
                });
            })(lastCallFilter);
          }

          // Otherwise normal datas are retrieved
          else {
            FilmService.querySummary().then(function(springDataResponse) {
              $scope.gridOptions.data = springDataResponse._embeddedItems;

            });
          }

        });
      }
    };


    FilmService.querySummary().then(function(springDataResponse) {
      $scope.gridOptions.data = springDataResponse._embeddedItems;
    });

可以告诉我是否有更好的方法来做到这一点？

问候

Answer 1

$scope.gridOptions.data = []显示无数据消息但禁用网格并阻止您清除未返回数据的过滤器。

$scope.gridOptions.data = [0]显示一个空行但$scope.gridOptions.data = [0]用网格。

目前，我不知道如何执行此操作以使其行为与不使用外部过滤器时相同。

Answer 2

您不需要清除数据变量，如果数据不存在，只需显示一条消息而不是加载网格：

JS：

if (typeof (data) == "undefined") {
    $scope.noData = true;    
} else {
    // otherwise the data are updated
    $scope.gridOptions.data = data;
    $scope.noData = false;
}

HTML：

<p ng-if="noData">You haven't any data to be displayed.</p>
<div class="table-responsive" ng-if="!noData">
    <div ng-grid="gridOptions"></div>
</div>

Answer 3

我最近经历了同样的事情，但决定简单地隐藏我在ng-show和ng-hide遇到问题的网格，但是如果你在网格上使用ng-if="vm.showHideGrid()"它可以工作。