Загрузка Данных

Pivot поддерживает как встроенные, так и внешние (в том числе серверные) данные в любом поддерживаемом формате: XML, JSON, JsArray и CSV.

Встроенные данные

Встроенные Данные (JSON)

var pivot_dataset = [
    {"name": "China", "year": 2005, "form": "Republic", "gdp": 181.357, "oil": 1.545 },
    {"name": "China", "year": 2006, "form": "Republic", "gdp": 212.507, "oil": 1.732 },
    //...
]

Чтобы загрузить встроенные данные во время инициализации компонента, используйте свойство data:

webix.ui({
    view: "pivot",
    id: "pivot",
    data: pivot_dataset
});

Чтобы загрузить встроенные данные после инициализации компонента, например при срабатывании события, используйте функцию parse:

$$("pivot").parse(pivot_dataset);

Related sample:  Loading from Inline Data Source

Внешние данные

Вне зависимости получаете ли вы данные из внешнего файла или с помощью скрипта на стороне сервера, вы должны использовать следующую схему.

Если вы загружаете данные во время инициализации компонента, укажите путь к файлу/скрипту как значение свойства url:

{
    view: "pivot",
    url: "../load.php" // или "../data.json"
}

Если вы загружаете данные после инициализации компонента (например при срабатывании события), используйте функцию load:

$$("pivot").load("../load.php");
//or
$$("pivot").load("../data.json");

В целом, способы загрузки данных Pivot соответствуют стандартным правилам загрузки данных Webix.

Related sample:  Loading from URL

Экспорт данных

Вы можете экспортировать результат в PDF, Excel, CSV и PNG форматы используя соответствующие методы - toPNG, toExcel, toCSV и toPDF:

webix.toPDF($$("myPivot"));
webix.toExcel($$("myPivot"));
webix.toPNG($$("myPivot"));
webix.toCSV($$("myPivot"));

Настройка экспорта данных в Excel

Помимо стандартных параметров экспорта, Pivot API позволяет настраивать выходные данные и рендеринг отдельных столбцов для данных на разных уровнях иерархии:

webix.toExcel($$("myPivot"),{
    flatTree:{
        id:"value",
        columns:[
            { header:"Form" },
            { header:"Country" },
        ]
    }
});

Свойство flatTree содержит следующие параметры:

  • id (string) - свойство данных, которое будет отображаться в столбцах
  • columns (array) - массив со столбцами, в которые будет распространяться указанное выше свойство данных в соответствии с уровнем иерархии
  • fill (boolean) - необязательный параметр. Если значение true, разрешает заполнять дочерние записи родительскими данными для каждого дочернего узла

Related sample:  Export Data from Pivot

Обработка внешних данных

Вы можете настроить обработку данных Pivot Table с помощью кастомного скрипта на стороне сервера. Таким образом, Pivot загрузит данные, сгруппированные на стороне сервера, тем самым предоставляя возможность пользовательской настройки.

Чтобы применить кастомную обработку данных, используйте свойство externalProcessing в конфигурации Pivot:

webix.ui({
    view: "pivot",
    externalProcessing: true,
    ...
});

Загружаемый источник данных в формате JSON должен содержать следующие свойства:

  • data - объект, включающий конфигурацию "columns" и "data".
    • columns - массив свойств колонок. Определяется так же, как и для TreeTable
    • data - JSON данные для TreeTable
  • structure - объект с начальной Pivot structure
  • fields - массив всех полей Pivot. Необходим для отображения в Окне настроек
  • options - (необязательный параметр) JSON объект с опциями для фильтра.

Правила для заголовков колонок Pivot:

  • нижние заголовки (заголовки с отформатированными значениями: "oil (min)") должны содержать два свойства:
    • operation - имя операции ("min", "sum",...)
    • name - имя поля
  • остальные заголовки (которые отображают категории) должны содержать свойство "name" с необходимым текстовым значением для отображения в таблице.

Пример данных Pivot с фильтром по полю "continent":

{
    "fields" :  ["balance", "continent", "form", ...],
    "options" : {
        "continent" : [ "Africa", "Asia", ... ]
    },
    "structure": {
        "filters" : [{ name: "continent", type: "multicombo"}],
        "rows" : ["year"],
        "columns" : ["continent"],
        "values" : [{ "name":"oil", "operation":["min","sum"]}]
    },
    "data" : {
        "columns" : [
            {
                "id" : "column0",
                "template" : "{common.treetable()} #column0#",
                "header" : {}
            },
            {
                "id" : "column1",
                "header" : [
                    { "name" : "Africa", "colspan": 2},
                    { "operation": "min", "name": "oil"}
                ]
            },
            ...
        ],
        "data": [
            {
                "column0": "2014",
                "column1" : 0.778,
                ...
            },
            ...
        ]
    }
}
Наверх
If you have not checked yet, be sure to visit site of our main product Webix ui library and page of javascript pivot product.