Работа с Фильтрами

Операции с фильтрами

Вы можете добавлять фильтры в коллекцию filters Pivot и Pivot Chart.

Добавление нового фильтра

Чтобы добавить новый фильтр, используйте метод filters.add(). Он принимает два параметра:

  • name - (string) имя компонента для фильтрации
  • isSelect - (boolean) необязательный параметр, определяет, нужен ли для компонента список опций (необходим для автоматического определения опций компонентам select, multiselect)
$$("pivot").filters.add("select", true);
$$("pivot").filters.add("datepicker");

Удаление фильтра

Чтобы удалить фильтр, используйте метод filters.remove():

$$("pivot").filters.remove("datepicker");

Related sample:  Removing Filters

Список фильтров

Чтобы получить список всех фильтров из коллекции filters, используйте метод filters.get():

var filters = $$("pivot").filters.get();

Изменение полей фильтрации

В некоторых случаях возникает необходимости изменить значения фильтрации (например, вы используете фильтр по датам и он возвращает таймштампы, а вы хотите отображать отформатированные даты).

1. Сначала вам нужно добавить в данные свойство, которое будет хранить отформатированную дату ($date). Это можно сделать, напрямую изменив данные, или в scheme $init. Свойства элементов данных, которые начинаются с "$", не добавляются в список "Fields".

2. Далее в свойстве filterMap определите соответствие между исходным полем date и отформатированной датой в $date.

webix.ui({
    view: "pivot",
    scheme:{
        $init: function(item){
            item.$date = webix.i18n.parseFormatDate(item.date).valueOf();
        }
    },
    structure: {
        filters:[{name: "date", type: "datepicker"}],
        ...
    },
    filterMap: {
        date: "$date"
    }
});

Related sample:  DatePicker Filter

Отображение фильтров Pivot в произвольном контейнере

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

В следующем примере элементы "filters" помещены в форму с ID "pivotFilters":

webix.ui({
    id: "pivot",
    view: "pivot",
    on:{
        onViewInit: function(name, config){
            if(name == "filters" && $$("pivotFilters"))
                webix.ui(config.elements, $$("pivotFilters"));
            config.elements = false;
        }
    },
    ...
});

Related sample:  Custom Filter Container

Наверх
If you have not checked yet, be sure to visit site of our main product Webix web ui framework and page of javascript pivot grid product.