Pivot позволяет изменять настройки компонентов фильтрации и саму таблицу с помощью события onBeforeRender. В качестве параметра событие принимает объект с тремя свойствами:
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, представленную в окне настроек, можно изменить с помощью события 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, используя следующий код:
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 вызывается после создания Окна настроек. Обработчик события принимает один параметр:
pivot.attachEvent("onPopup", function(popup){
// ваш код
});
Список "Fields" можно отсортировать применив "$sort" scheme. По умолчанию установлен возрастающий порядок сортировки. В этом случае в качестве типа cортировки можно задать только "text":
webix.ui({
view: "pivot",
on:{
onPopup: function(popup){
popup.$$("fields").define("scheme",{
$sort: {
by: "text"
}
});
}
}
});
Настраивать компоненты лейаута и добавлять новые можно используя событие 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";
};
}
}
}
},
...
});
Наверх