Фильтр AngularJS ng-grid - filterText формат

Ответ 1

На момент написания этой статьи нет резюме о том, как построить строку 'filterText' в целом. Изучив код ng-grid.js и сделав некоторые догадки, я обнаружил, что "filterText" намного более мощный и выразительный, чем предлагает текущая документация.

Пример настройки

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

  $scope.pricing_data = data['records'];

  $scope.gridOptions = { 
    data: 'pricing_data',
    columnDefs: [
      { field: 'ticker', displayName: 'Ticker' },
      { field: 'date',   displayName: 'Date'   },
      { field: 'close',  displayName: 'Close'  },
      { field: 'volume', displayName: 'Volume' }
    ],
    filterOptions: {filterText: '', useExternalFilter: false},
    showFilter: true
  };

Объектом данных ['records'] может быть некоторый объект json, посланный из бэкэнд. Примерная таблица может выглядеть так:

Как и в самом деле, filterText пуст, поэтому представлены все записи.

Морковка в правом верхнем углу сетки видна, потому что showFilter прав. Нажатие на морковку вниз показывает вход, который связан с переменной "filterText". Для этого обсуждения я покажу некоторые результаты, используя этот раскрывающийся список, но обычно вы можете напрямую назначить filterText в своем коде контроллера. Выпадающее меню выглядит так:

Поиск всех полей в сетке

По умолчанию filterText выполняет регулярное выражение для каждой ячейки сетки. Ввод символа "a" выбирает все записи, которые имеют символ "a" в любой записи (или столбце) этой записи. Ввод "ab" выбирает все записи, которые имеют последовательность символов "ab" в любой записи этой записи. В зависимости от ваших требований это поведение может быть идеально подходящим. Однако с большими наборами данных обычно требуется фильтровать по столбцам, а не по всей сетке, из-за характера данных (например, выбрать тикер цен) и из-за высокой стоимости поиска всей сетки.

Поиск по столбцу

Для поиска строки или регулярного выражения только на одном столбце синтаксис filterText:

filterText = '<displayName>:<literal>'

Например,

Здесь displayName 'Date' (не использовать значение поля, вы должны использовать displayName) сопровождается двоеточием ':', а затем частичной строкой. В результате выбираются только три записи, связанные с 30 октября.

Позвольте развернуть поиск. Чтобы искать 30 октября или 31 октября, синтаксис

filterText = '<displayName>:<literal 1>|<literal 2>|...'

где труба '|' разделяет каждую часть строки. Вы можете цеплять вместе, сколько угодно. Фильтр с несколькими датами может выглядеть так:

Очевидно, что выбор имеет OR. Мой пример невелик, потому что тикеры и даты имеют непересекающиеся символы. Поэтому вы можете доверять мне, что только столбец "Дата" выполняется поиск или настраивает собственный пример. (Или, что еще лучше, прочитайте функцию buildSearchConditions() в ng-grid, это довольно понятно).

Записи поиска в нескольких столбцах

Поиск нескольких столбцов требует только синтаксического расширения поиска в столбце. Этот синтаксис:

filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'

Оперативный лексический элемент - точка с запятой ';' который отделяет каждый столбец displayName.

Продолжая этот пример, давайте искать nyt или nvda 30 октября или 31 октября. Это выглядит так:

Логически, поиск фильтра (по тикеру для nyt OR nvda) И (по дате для 10-30 ИЛИ 10-31),

Обновления сетки

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

Когда контроллер angular -js, работающий совместно с бэкэнд, обновляет данные сетки, затем обновленные данные проталкиваются через фильтр. Это прекрасный результат, по сути, фильтр сохраняется.

Известный ошибка - Очистить

На момент написания этой статьи есть недавнее исправление известной ошибки, при которой очистка фильтраText почти или действительно зависает браузера. Следующий отчет: ng-grid-проблема 777. Исправление было объединено после ng-grid issue 848. Я могу определенно подтвердить, что я вижу плохую производительность, когда фильтр, примененный к большому набору данных, очищается. Я еще не тестировал исправление.

UPDATE

Я только что обошел установку ng-grid 2.0.8. Ясная проблема - это фиксированный афайк. Отлично работает.

ng-grid 3.0

ng-grid 3.0 теперь находится на чертежной доске. В ng-grid 2.0 уже так много хорошего, но, как и любой новый код, несколько переписываний помогают. Я рекомендую разработчикам ng-grid поддерживать функции фильтра, которые они уже включили, и, возможно, увеличить производительность или диапазон.

Ответ 2

Основываясь на ответе JayInNyc, я сделал несколько вещей, чтобы упростить использование пользователем вместо этого синтаксиса. Я в основном наблюдаю за любыми полями, для которых я хочу фильтровать. В этом случае у меня есть поле ввода для имени и города.

$scope.filterOptions = {
    filterText: ''
};
$scope.filterName = '';
$scope.filterCity = '';

$scope.$watch('filterName', function (value) {

    setFilterText();
});

$scope.$watch('filterCity', function (value) {

    setFilterText();
});

function setFilterText()
{
    $scope.filterOptions.filterText = 'Name: ' + $scope.filterName + ';City:' + $scope.filterCity;
}

Btw - Я хотел использовать функцию компиляции, но он, похоже, не работал. У меня было следующее, но он не работал.

filterOptions.filterText = $compile('Name:{{filterName}};Category:{{filterCategory}}')(scope);