Невозможно очистить данные, когда нет результата, используя внешнюю фильтрацию в UI.Grid (Angular)

Question

Невозможно очистить данные, когда нет результата, используя внешнюю фильтрацию в UI.Grid (Angular)

0

Я использую angular-ui-grid, и это действительно мощный lib. Я пытаюсь использовать параметр 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;
    });

Мог бы сказать, есть ли лучший способ сделать это?

С уважением

Zuzu 24 авг. 2015, в 17:32

Источник

Теги:

angularjs

filter

external

clear

angular-ui-grid

3 ответа

Ещё вопросы

Vedran · Answer 1 · 2017-02-01T07-36-00.000Z

$scope.gridOptions.data = [] показывает сообщение "Нет данных", но отключает сетку и предотвращает очистку фильтра, который не возвращал данные.

$scope.gridOptions.data = [0] показывает пустую строку, но не отключает сетку.

В этот момент я не знаю, как это сделать, чтобы вести себя так же, как при использовании внешних фильтров.

GSpiteri · Answer 2 · 2015-08-26T19-30-00.000Z

Недавно я прошел то же самое, но решил просто скрыть сетку, в которой у меня были проблемы с ng-show и ng-hide но если вы используете ng-if="vm.showHideGrid()" на сетке, это работает.

showHideGrid (): boolean {this.showGrid =! ((this.gridData === undefined || this.gridData.length === 0)); вернуть this.showGrid; }

michelem · Answer 3 · 2015-08-24T13-40-00.000Z

Вам не нужно очищать переменную данных, просто покажите сообщение вместо загрузки сетки, если данных нет:

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>

Спасибо за ваш ответ, это может быть решением. Но когда вы смотрите на учебник в обычном [filtering demo] ( ui-grid.info/docs/#/tutorial/103_filtering ) сетка не показывает сообщение, а только пустые данные. Я хочу такое же поведение ... если это возможно :)
Поэтому я думаю, что вы можете просто сделать $scope.gridOptions.data = {} и все готово.
Я пытался раньше, но uigrid искать определение столбца в данных и без ошибки выброса ... вот почему я должен положить $ scope.gridOptions.data = [{title: '', category: '', releaseYear: '', длина: ''}];
другим способом, очень похожим на ваш, может быть использование селектора jquery для скрытия / показа: $ ('. ui-grid-canvas'). hide () / show (), но я думаю, что есть лучший способ? (я пробую, это тоже работает)
$ scope.gridOptions.data = [] работал для меня