Создание Pivot Table на Странице

Поскольку Pivot является дополнением к библиотеке Webix, вам необходимо включить скрипты Webix и Pivot, а также их файлы CSS. Убедитесь, что вы указали относительные пути к этим файлам:

<html>
 <head>
  <!-- файлы js -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <script src="codebase/pivot.js" type="text/javascript"></script>
  <!-- файлы css -->
  <link rel="stylesheet" href="codebase/webix.css"
    type="text/css" charset="utf-8">
  <link rel="stylesheet" href="codebase/pivot.css"
    type="text/css" charset="utf-8">
 </head>
 <body>
   <div id = "testA"></div>  <!-- контейнер для Pivot -->
 </body>
</html>

Инициализация Pivot не отличается от инициализации других компонентов Webix и выполняется с помощью конструктора webix.ui(), где вы перечисляете все необходимые свойства:

webix.ui({
    view: "pivot",
    id: "pivot",
    max: true,
    structure: {
        rows: ["form", "name"],
        columns: ["year"],
        values: [
            { name: "gdp", operation: "sum"},
            { name: "oil", operation: "sum"}
        ],
        filters: []
    }
});

Related sample:  Loading from Inline Data Source

Основные свойства

  • id - (string, number) ID компонента, должен быть уникальным в пределах страницы. Обращение к любому компоненту в Webix осуществляется по его ID: $$("id");
  • container - (string) ID контейнера HTML, в который можно поместить Pivot (необязательное свойство);
  • fieldMap - (object) используется для задания пользовательских названий для полей (необязательное свойство). Больше информации в разделе Переименование Полей;
  • max - (boolean) применяет/отменяет ЗЕЛЕНОЕ подсвечивание ячеек с наибольшим значением в строке (необязательное свойство);
  • min - (boolean) применяет/отменяет КРАСНОЕ подсвечивание ячеек с наименьшим значением в строке (необязательное свойство);
  • data или url - (string) определяет данные (подробнее в статье Загрузка Данных);
  • structure - (object) определяет начальную структуру и внешний вид Pivot (подробности ниже);
  • separateLabel - (boolean) разделяет "label" и фильтр Pivot и снимает размерные ограничения для "label", по умолчанию true.

Объект "structure"

  • rows - массив полей, данные из которых будут отображаться в первой колонке таблицы Pivot-а;
  • columns - массив полей, значения из которых будут названиями остальных колонок таблицы;
  • values - массив полей, значения из которых заполнят ячейки таблицы Pivot;
  • filters - массив полей, которые будут использованы для фильтрации и будут отображаться над колонками таблицы. Подробнее о работе с фильтрами в Работа с Фильтрами.
Наверх
If you have not checked yet, be sure to visit site of our main product Webix javascript ui library and page of javascript pivot grid product.