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

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

Вы можете добавлять фильтры в коллекцию 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":

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

Related sample:  Custom Filter Container

Значение для начальной фильтрации

Вы можете задать значение для начальной фильтрации в Pivot. Для этого необходимо использовать свойство value объекта фильтра в коллекции filters в момент инициализации Pivot:

webix.ui({
    id:"pivot",
    view:"pivot",
    structure: {
        filters:[{ name: "name", type: "text", value:"Argentina" }],
        // ...
    }
});

В примере выше данные Pivot будут отфильтрованы по значению "Argentina" сразу после инициализации компонента.

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