Пользовательские Настройки

Изменение Структуры Pivot

Структуру Pivot, представленную в окне настроек, можно изменить с помощью события onBeforeApply.

Событие вызывается по клику на кнопку "Apply", обработчик принимает объект "structure" с выбранными в качестве параметров "filters", "values" и "groupBy".

Например, вы можете изменить массив фильтров перед применением выбранной структуры:

webix.ui({
    view: "pivot",
    on:{
        onBeforeApply: function(structure){
            var filters = structure.filters;
            // изменяет массив фильтров
            // ...
        }
    }
});

Конфигурация окна настроек

Вы можете задать размер "Окна настроек" с помощью объекта popup:

webix.ui({
    view:"pivot",
    popup:{
        popupWidth:800, 
        height:600
    }
});

Доступ к окну настроек

Событие onPopup вызывается после создания Окна настроек. Обработчик события принимает один параметр:

  • popup - (object) объект всплывающего окна
pivot.attachEvent("onPopup", function(popup){
    // ваш код
});

Сортировка списка "Fields"

Список "Fields" можно отсортировать применив "$sort" scheme. По умолчанию установлен возрастающий порядок сортировки. В этом случае в качестве типа cортировки можно задать только "text":

webix.ui({
    view: "pivot",
    on:{
        onPopup: function(popup){
            popup.$$("fields").define("scheme",{
                $sort: {
                    by: "text"
                }
            });
        }
    }
});

Добавление и изменение внутренних компонентов Окна настроек {innerview}

Настраивать компоненты лейаута и добавлять новые можно используя событие onViewInit.

Поле поиска для списка "Fields"

Список "Fields" вместе с заголовком находится во внутреннем компоненте "fieldsLayout" окна настроек Pivot.

Чтобы добавить поле поиска, необходимо вставить его конфигурацию в "rows" соответствующего лейаута. Конфигурация будет содержать обработчик события onTimedKeyPress для фильтрации списка:

webix.ui({
    id: "pivot",
    view: "pivot",
    popup:{
        on:{
            onViewInit: function(name, config){
                if(name == "fieldsLayout"){
                    var searchConfig = {
                        view: "search",
                        on:{
                            onTimedKeyPress: function(){
                                var list, text,win;
                                win= $$("pivot").getConfigWindow();
                                list = win.$$("fields");
                                text = this.getValue();
                                list.filter("name", text);
                            }
                        }
                    };
                    config.rows.splice(1,0,searchConfig);
                }    
            }
        }
    },
    ...
});

Related sample:  Custom Popup Structure

Группировка полей

Список "Fields" можно разделить на несколько групп, заменив компонент "list" на "unitlist".

В примере ниже "balance", "gdp" и "oil" будут помещены в группу "number", остальные поля в группу "text".

var valueFields = {"balance":1,"gdp":1, "oil": 1};
 
webix.ui({
    id: "pivot",
    view: "pivot",
    popup:{
        on:{
            onViewInit: function(name, config){
                if(name == "fields"){
                    config.view = "unitlist";
                    config.uniteBy = function(item){
                        return valueFields[item.text]?"Number":"Text";
                    };
                }
            }
        }
    },
    ...
});

Related sample:  Fields Groups

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