Я использую AngularJS ng-grid ( v2.0.7 v2.0.8), и я хотел бы понять синтаксис поля filterText в API.
В частности, я хотел бы знать, как фильтровать определенный столбец или столбцы и фильтровать одну или несколько записей в столбце.
Существует много проблем с переполнением стека с тегами ng-grid и фильтра, и хотя они полезны, то, который дает полное резюме формата filterText, в настоящее время недоступно.
На момент написания этой статьи нет резюме о том, как построить строку '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 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;
}
Btw - Я хотел использовать функцию компиляции, но он, похоже, не работал. У меня было следующее, но он не работал.
filterOptions.filterText = $compile('Name:{{filterName}};Category:{{filterCategory}}')(scope);