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

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

По умолчанию фильтры рисуются на тулбаре над таблицей. Вы можете поместить их в другой контейнер с помощью события 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" сразу после инициализации компонента.