Создание 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 - массив полей, которые будут использованы для фильтрации и будут отображаться над колонками таблицы. Подробнее о работе с фильтрами в Работа с Фильтрами.

Как запустить пакетные примеры локально

Существует три способа запустить пакетные примеры локально. Самый простой способ - перейти в корневую директорию, затем в папку samples и открыть необходимый пример двойным щелчком мыши. Пример откроется в новой вкладке браузера.

Как запустить примеры на локальном сервере

Вы можете использовать любой локальный сервер (напр., Apache). Укажите папку Pivot как корневую директорию локального сервера и запустите его. Обычно локальный сервер доступен по localhost.

Как запустить примеры на дев сервере

Чтобы менять код в примерах и видеть соответствующие изменения, вам необходимо запустить дев сервер. Перейдите в корневую папку Pivot, установите необходимые зависимости и запустите дев сервер:

// переходим в корневую папку
cd pivot
 
// устанавливаем зависимости
yarn install //или npm install
 
// запускаем дев сервер
yarn server //или npm run server
Наверх
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.