AngularJS ng-grid filter filterТекстовый формат

На момент написания этой статьи сводки о том, как построить строку '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
  };

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

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

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

Поиск по всем полям в сетке

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

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

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

filterText = '<displayName>:<literal>'

Например,

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

Давайте расширим поиск. Для поиска 30 октября или 31 октября используется следующий синтаксис:

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

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

Очевидно, что выбор осуществляется по принципу ИЛИ. Однако мой пример не очень хорош, потому что бегущие строки и даты имеют непересекающиеся символы. Таким образом, вы можете либо поверить мне, что выполняется поиск только в столбце «Дата», либо настроить свой собственный пример. (Или, что еще лучше, прочитайте функцию buildSearchConditions() в ng-grid, она довольно ясна).

Поиск записей в нескольких столбцах

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

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

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

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

Логически фильтр ищет (вдоль тикера для nyt ИЛИ nvda) И (вдоль даты для 10 -30 ИЛИ 10-31).

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

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

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

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

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

ОБНОВЛЕНИЕ

Я только что установил ng-grid 2.0.8. Явная проблема исправлена. Работает отлично.

нг-сетка 3.0

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

Основываясь на ответе 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;
}

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

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