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

Предварительная настройка

Pivot позволяет изменять настройки компонентов фильтрации и саму таблицу с помощью события onBeforeRender. В качестве параметра событие принимает объект с тремя свойствами:

• filters - массив с настройками компонента. Например для фильтра типа "select" это будут настройки контрола "select";
• header - массив с настройками колонок таблицы;
• data - JSON-данные для таблицы.

Pivot вызывает событие onBeforeRender до отрисовки. Таким образом, событие может быть использовано для настройки фильтров, колонок таблицы и данных.

Давайте рассмотрим несколько примеров:

1) изменение текста в заголовках колонок с "value (min)" на "min of value":

webix.ui({
    view: "pivot",
    on:{
        onBeforeRender: function(config){
            // получает данные
            var columns = config.header;
            // изменяет значение 
            for(var i=1; i < columns.length; i++){
                var h = columns[i].header;
                var text = h[h.length-1].text.replace(/(\w+)\s\((\w+)\)/,'$2 of $1');
                h[h.length-1].text = text;
            }
        }
    }
});

2) раскрашивание колонок:

webix.ui({
    view: "pivot",
    on:{
        onBeforeRender: function(config){
            var columns = config.header;
            for(var i=1; i < columns.length; i++){
                columns[i].cssFormat = function(value){
                    var css = "";
                    if(value <0)
                        css = { "color":"red" };
                    else if(value >0 )
                        css = { "color":"green" };
                    return css;
                };
            }
        }
    }
});

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

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

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

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

webix.ui({
    view: "pivot",
    on:{
        onBeforeApply: function(structure){
            var columns = structure.columns;
            // применение сортировки заголовка
            for(var i =0; i < columns.length; i++){
                if(typeof cols[i] == "string"){
                    cols[i] = {id: cols[i], sort: "string"};
                }
                else
                    cols[i].sort = "string";
            }
        }
    }
});

Получение объекта Datatable

Вы можете получить доступ к объекту DataTable, используя следующий код:

var datatable = $$("pivot").$$("data");

С доступом к объекту DataTable вы можете воспользоваться любыми событиями и методами таблицы. Тем не менее, мы не рекомендуем переопределять свойства DataTable.

// задать обработчик события
datatable.attachEvent("onAfterSelect", function (id) {
    webix.message("selected row: "+id);
});  
 
// или получить ID выбранного элемента.
var sel = datatable.getSelectedId();

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

Вы можете задать размер "Окна настроек" с помощью объекта 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

Наверх