Компоненты поверх ячеек

Spreadsheet позволяет добавлять чарты, изображения, а также другие Webix компоненты прямо поверх ячеек. Пользователь может перемещать элементы в любое место таблицы с помощью драг-н-дроп.

Добавление чартов и изображений

Добавить чарты и/или изображения в Spreadsheet можно тремя способами:

По клику кнопок (конечным пользователем)

Редактирование чартов и изображений (конечным пользователем)

Пользователь может редактировать чарты и изображения с помощью специального окна:

Для чартов:

Используя API

Добавить компонент можно с помощью метода add(), вызвав его у модуля views:

Добавление чарта и изображения

ssheet.views.add(750, 50, "chart", "B2:E7", {
    type:"line", legend:1, xAxis:1, width:550, height:400
});
 
ssheet.views.add(50,400,"image","path/to/image005.jpg");

Related sample:  Spreadsheet: Adding images and charts

Метод принимает следующие параметры:

  • x (number) - позиция по горизонтали;
  • y (number) - позиция по вертикали;
  • type (string) - тип компонента ("chart", "image" или свой собственный);
  • data (string, array) - данные для компонента, а именно:
    • диапазон ячеек, например "B3:C7"
    • данные в формате JSArray;
    • (для изображений) ссылка на изображение или строка base64;
  • config (object) - объект со следующими свойствами:

    Общие свойства:

    • width (number) - ширина компонента;
    • height (height) - высота компонента;

    Специфичные для чарта свойства:

    • type (string) - тип чарта;
    • dataSeries (string) - получает данные из столбцов/рядов (по умолчанию'columns');
    • xAxis (boolean|object):
      • boolean - в случае true, использует данные левого столбца в качестве оси X;
      • object - объект со следующими свойствами:
        • fromData (boolean) - в случае true, использует данные левого столбца / верхнего ряда (зависит от dataFrom) в качестве оси X ;
        • title (string) - заголовок оси X;
        • range (string) - диапазон ячеек (например, "C3:C7") для оси Х.
    • yAxis (object) - объект со следующими свойствами:
      • title (string) - заголовок оси Y;
    • legend (boolean|object):
      • boolean - в случае true, использует данные верхнего ряда в качестве легенды;
      • object - объект со следующими свойствами:
        • fromData (boolean) - в случае true, использует данные левого столбца / верхнего ряда (зависит от dataFrom) в качестве легенды;
        • align (string) - горизонтальное выравнивание блока ("right", "left", "center" по умолчанию);
        • valign (string) - вертикальное выравнивание блока ("top", "middle", "bottom" по умолчанию)
        • range (string) - использует диапазон ячеек (например, "C3:C7") в качестве легенды.
    • scale (object) - объект со следующими свойствами:
      • lines (boolean) - в случае false, линии масштаба скрыты;
      • circle (boolean) - форма внешней рамки у области (для типа "radar");
      • color (string) - цвет линий.
    • 3D (boolean) - включает 3D чарт (для типа pie);
    • pieInnerText (boolean) - добавляет внутренние ярлыки pie (для типов pie и donut );
    • stacked (boolean) - задаёт "stacked" чарту (для чартов bar и area).

При инициализации таблицы

Можно загрузить компонент, передав массив с его параметрами в массив views внутри свойства таблицы data. Подробнее о параметрах выше.

webix.ready(function(){
  webix.ui({
      view:"spreadsheet",
      data: {
        data:[ /*data array*/ ],
        ...
        views:[
            [ 750, 50, "chart", "B2:E7", {type:"line", legend:1, xAxis:1} ],
            [ 50, 400, "image", "path/to/image005.jpg" ]
        ]
      }
  });
});

Related sample:  Spreadsheet: Loading images and charts

Добавление Webix компонентов

Помимо встроенных чартов и изображений, вы можете добавить любой Webix компонент.

Процесс состоит из двух шагов:

Регистрация компонента

Прежде всего новый компонент нужно зарегистрировать, вызвав метод register() у модуля views. Метод принимает следующие параметры:

  • type (string) - тип компонента;
  • render (function) - функция, которая будет вызвана при отображении компонента. Принимает следующие параметры:
    • node (object) - Webix window, в котором будет отображён компонент;
    • config (object) - объект конфигурации компонента;
    • data (array) - JSON данные для парсинга;
  • track (function) - функция, которая будет вызвана при изменениях в Spreadsheet. Принимает следующие параметры:
    • view (object) - экземпляр компонента;
    • data (array) - JSON данные для парсинга.

Регистрация нового компонента

ssheet.views.register("table", (node, conf, data) => {
      // объект конфигурации и отображение компонента
      const config = { view:"datatable", autoConfig:true, autoheight:true };
      return webix.ui(config, node);
  }, (view, data) => {
      // обновление данных
      view.clearAll();
      if(webix.isArray(data))
          view.parse(data);
  }
);

Добавление компонента

После регистрации компонента, его можно добавить в Spreadsheet с помощью метода add():

Добавление компонента

ssheet.views.add(50, 50, "table", "B3:E7", {width:550});

Related sample:  Spreadsheet: Adding Webix view

Редактирование компонента

У встроенных типов "chart" и "image" есть диалоговые окна для редактирования. Чтобы у конечного пользователя была возможность редактирования других типов компонентов, диалоговые окна нужно добавлять вручную.

Для этих целей мы рекомендуем использовать ssheet-dialog. Для примера мы добавили только одно поле для данных. Вы вправе помещать столько контролов сколько требуется.

Настройка диалогового окна

var dialog = webix.ui({
  view: "ssheet-dialog",
  head: "Edit data",
  position: "center",
  body: {
    view: "form",
    elements:[
        {view: "text", name:"data", label: "Data", placeholder: "Enter data"}
    ]
  }
});

Подробнее о стилизации диалоговых окон.

Чтобы открыть диалоговое окно,необходимо задать событие onCommand для Spreadsheet:

Показ диалогового окна

ssheet.attachEvent("onCommand", function(obj){
  obj.data = obj.config.data;
  dialog.getBody().setValues(obj);
  dialog.show();
});

Related sample:  Spreadsheet: Adding Webix view

Чтобы применить новые значения, используйте событие диалогового окна onSaveClick. Внутри события вызовите метод update у Spreadsheet модуля views:

var dialog = webix.ui({
  view: "ssheet-dialog",
  body: {
    view: "form"
  },
  on: {
    onSaveClick: function () {
        var values = this.getBody().getValues();
        // обновляет данные в соответствии с данными полей
        ssheet.views.update(values.viewid, values.data, values.config) 
        this.hide();
    },
    // другие обработчики
  }
});
Наверх