Рубрики
Без рубрики

Электронная таблица Webix. Это полноценная веб-альтернатива для Excel?

Продолжая тему постепенного перехода от настольного программного обеспечения к аналогичным онлайн -сервисам, в … с меткой JavaScript, электронной таблицей, программированием, WebDev.

Продолжение Тема постепенного перехода от настольного программного обеспечения к аналогичным онлайн -сервисам В этой публикации я хочу поговорить о виджете электронной таблицы, который может конкурировать с Его Величество “Excel” Анкет Это выдающийся компонент JavaScript, который обеспечивает полноценную поддержку любых электронных таблиц. Между тем, этот инструмент очень гибкий и может быть легко интегрирован в любую среду.

Если вам нужно добавить какой-то инструмент, похожий на Excel с обширными функциональными возможностями и высокой производительностью в вашем бизнес-приложении, вы должны обратить внимание на Электронная таблица Виджет из команды Webix. Давайте выясним, что они могут предложить нам и стоит ли игра.

Что такое электронная таблица JS

Электронная таблица Webix является комплексным решением JavaScript для работы с электронными таблицами различной сложности. Компонент является одним из самых продвинутых инструментов из строки сложных виджетов библиотеки Webix.

Недавно ( Начиная с версии 8.2 ), электронная таблица получила новый двигатель и поддержку по математике с несколькими листами. Эти обновления значительно ускорили его производительность по сравнению с предыдущими версиями.

Функциональность виджета

Функциональность инструмента довольно обширная. Вы можете создавать электронные таблицы, управлять их данными через удобный интерфейс, экспортные данные в требуемом формате ( Excel, PDF, CSV или Png ) и многое другое. Помимо создания собственных листов, вы можете импортировать локальные данные в формате Excel и изменить их в зависимости от ваших потребностей.

В частности, вы можете работать с таблицами таким образом:

  • Создать, копировать и удалять листы
  • Экспорт, импорт и печатные листы
  • управлять историей изменений
  • стилизовать содержимое ячейки
  • Сортировать, отфильтровать и блокировать содержимое ячейки
  • Добавьте ссылки, картинки, диаграммы и комментарии в ячейки и над ними
  • Управление столбцами и рядами:
    • Добавить и удалить
    • Скрыть и показывать
    • Изменить размер и заморозить
  • Примените широкий спектр формул и многое другое.

Как вы можете видеть, функции виджета достаточно велики, и его способности не уступают своему настольному аналогу. Чтобы прочитать больше информации о возможностях электронной таблицы, посетите Связанная статья Анкет

Интерфейс виджета

Вы можете работать с виджетом через удобный и удобный интерфейс. Если вы опытный пользователь Excel, у вас не будет никаких трудностей с пониманием пользовательского интерфейса компонента. Визуально он состоит из 3 частей:

  • Панель инструментов
  • Рабочая среда
  • Нижний бар.

Панель инструментов содержит различные элементы управления, деленные на функциональные группы. С их помощью вы можете управлять данными листа. В зависимости от настройки виджета элементы управления могут отличаться. Но мы поговорим об этом позже.

В рабочем пространстве компонента вы можете просмотреть электронные таблицы, с которыми вы будете работать. Используя элементы управления панели инструментов, вы можете управлять данными таблицы и изменить их самостоятельно.

И в нижней части применения есть нижняя полоса, где вы можете перемещаться по листам, а также добавлять, удалить и переименовать их.

Теперь, после краткого обзора функциональности и интерфейса виджетов, давайте перейдем к тому, как фактически создать ее с основной конфигурацией.

Как создать виджет с основной функциональностью

Электронная таблица Webix – одна из Самые продвинутые инструменты библиотеки Webix. Виджет распространяется под профессиональной версией библиотеки, но не включен в него. Вы можете приобрести этот компонент как часть лицензионного пакета. Узнайте больше о Страница лицензирования Анкет

Если вы хотите проверить все преимущества и гибкость работы с электронной таблицей (и не только), Скачать Trial Pro версия библиотеки. Он включает в себя все сложные виджеты и доступен бесплатно в течение 30 дней.

Теперь давайте посмотрим, как включить виджет на страницу и запустить его с основной функциональностью. И это делается ясным и простым способом. Учитывая, что электронная таблица основана на компонентах Webix, вы должны сначала включить библиотечные источники. А после этого вам нужно указать соответствующие ссылки на .js и .css файлы самого виджета. В коде это выглядит так:

После включения необходимых источников вы можете инициализировать виджет с помощью нескольких строк кода. Для этого вы должны позвонить webix.ui () Конструктор, передавая его объект с необходимой конфигурацией.

Чтобы убедиться, что код приложения начнет выполнять после полной загрузки HTML -страницы, поместите конструктор в webix.ready (function () {/* constructor */}) метод В коде это выглядит так:

Теперь вы можете использовать основные функции виджета электронной таблицы. И здесь стоит упомянуть, что у вас есть возможность настроить функциональность компонентов. Например, вы можете добавить необходимые инструменты или удалить ненужные. В браузере вы увидите следующий результат:

Как настроить электронную таблицу

Виджет электронной таблицы является своего рода конструктором. Его особенность заключается в том, что он состоит из многих отдельных компонентов Webix. У каждого из них есть свои свойства и методы. Используя эти API, вы можете настроить тот или иной элемент интерфейса и его поведение (например, элементы управления на панели инструментов).

Кроме того, сам компонент имеет богатый набор собственных свойств и методов, которые позволяют вам настраивать его и управлять его поведением. И здесь стоит прояснить, что вам нужно использовать декларативный подход для настройки виджетов Webix. Это означает, что все параметры указаны с использованием наиболее удобного Json синтаксис. Все, что вам нужно сделать, это установить необходимые свойства для соответствующих значений.

Сам виджет объявлен через Просмотр: «Электронная таблица» выражение. И на самом деле этого вполне достаточно для создания электронной таблицы с основной функциональностью. Теперь давайте посмотрим, как улучшить его конфигурацию.

Дополнительная панель инструментов

Мы можем начать с панели инструментов приложения, которая включает в себя элементы управления для управления таблицами. И здесь стоит отметить, что в конфигурации по умолчанию панель инструментов отображает только минимальный набор элементов управления, необходимых для работы с данными.

Если вы хотите использовать расширенный набор элементов управления, вам необходимо указать Панель инструментов свойство и установите его на “Полный” ценность. В коде это выглядит так:

{
  view: "spreadsheet",
  toolbar: "full"
}

В браузере вы увидите следующий результат:

Есть также случаи, когда панель инструментов вообще не нужна. Чтобы удалить его, установите Панель инструментов собственность в ложный Анкет

Главное меню

Работа с расширенной панелью инструментов не всегда может быть удобной. Также стоит учитывать, что если у вас есть небольшое разрешение экрана, некоторые элементы управления могут быть скрыты. Чтобы избежать этого, вы можете добавить дополнительное меню в верхней части виджета. Для этого вам нужно указать меню свойство и установите его на Верно В конфигурации компонента. В коде это выглядит так:

{
  view: "spreadsheet",
  menu: true
}

А в браузере вы увидите следующий результат:

Редактор Формулы

Как было упомянуто выше, функциональность виджета не уступает своему настольному брату. Доказательством этого является полная поддержка всех формул для работы с данными, которые поддерживаются в Excel. Вы можете найти полный список формул с подробным описанием в это статья.

А для работы с формулами есть специальный редактор, который находится под панелью инструментов. Когда вы введете имя функции, редактор покажет список возможных параметров, которые соответствуют введенным символам. Кроме того, когда вы нажимаете на ячейку, применяется формула, виджет будет выделять все ячейки, которые находятся в пределах диапазона этой формулы.

При желании вы можете скрыть этот редактор, и поддержка математики останется прежней. Для этого вы должны установить Liveeditor собственность в ложный в конструкторе виджетов. В коде это выглядит так:

{
  view: "spreadsheet",
  liveEditor: false
}

Нижний бар

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

Если вы хотите показать эту панель, установите Боттабар собственность в Верно Анкет В коде это выглядит так:

{
  view: "spreadsheet",
  bottombar: true
}

В браузере вы увидите следующий результат:

Следует также иметь в виду, что если вы используете расширенную версию панели инструментов ( панель инструментов: «Полный» ), нижняя панель будет отображаться по умолчанию. Чтобы скрыть это, установите Боттабар собственность в ложный Анкет

Readonly Mode

Иногда существуют ситуации, когда вам нужно использовать виджет только для отображения определенной информации. Для таких случаев виджет обеспечивает режим Readonly.

Чтобы включить эту функцию, установите readonly собственность в Верно Анкет Теперь виджет будет отображать только рабочее пространство с текущим листом (таблица). Все дополнительные панели будут скрыты. В коде это выглядит так:

{
  view: "spreadsheet",
  readonly: true
}

В браузере вы увидите следующий результат:

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

В конфигурации виджета вы можете указать данные, которые будут отображаться при начальной загрузке. В зависимости от данных расположено (на стороне клиента или на сервере), вы должны использовать либо данные или URL свойства или parse () или Load () методы Давайте поближе посмотрим на каждый из этих вариантов.

Анализ данных на стороне клиента

По умолчанию виджет принимает данные в Json формат. Если данные находятся на стороне клиента, вы можете либо установить данные Свойство в объект с данными или анализом одни и те же данные через parse () метод

Объект данных будет содержать определенные поля, в которых вы можете описать соответствующие параметры, а именно:

  • Данные (данные ячейки)
  • стили (стиль ячеек)
  • пролеты (слияние клеток)
  • Таблица (параметры таблицы)
  • и другие поля.

Вы можете найти полный список настроек листа в это статья. Объект с настройками может выглядеть примерно так:

const sheet_data = {
    "styles": [
        ["wss1",";;center;;;;;;;;;"],
        ...
    ],
    "sizes": [
        [0,1,125],
    ],
    "data": [
        [1,1,"Report - July 2016","wss1", "string"],
        [1,2,"","wss2"],
        ...
    ],
    "spans": [
        [1,1,5,1]
    ]
};

Вы можете установить данные свойство для этого объекта в конструкторе виджета:

{
  view: "spreadsheet",
  data: sheet_data
}

или передать его parse () Метод как параметр:

{
   view: "spreadsheet",
   id: "ssheet"
}
$$("ssheet").parse(sheet_data);

Вы можете увидеть живую демонстрацию Здесь Анкет

Загрузка данных на стороне сервера

Если вам нужно загрузить удаленные данные с сервера, вы можете установить URL Свойство по соответствующему пути находится желаемый файл:

{
  view: "spreadsheet",
  url: "sheet_data.js"
}

или загрузить данные через Load () Метод, передавая соответствующую ссылку в качестве параметра:

{
  view: "spreadsheet",
  id: "ssheet"
}
$$("ssheet").load("sheet_data.js");

И здесь следует иметь в виду, что виджет может обрабатывать данные в различных форматах. Например, если вам нужно загрузить данные в CSV Формат, вы должны установить DataType свойство в требуемый формат:

{
  view: "spreadsheet",
  id: "ssheet",
  url: "sheet_data.csv",
  datatype: "csv"
}

или передать формат Load () Метод как второй параметр:

$$("ssheet").load("sheet_data.csv", "csv");

Вы можете увидеть живую демонстрацию Здесь Анкет

Загрузка данных в формате Excel требует особого внимания. Помимо типа данных и пути файла, вам необходимо указать бинар-> Прокси -объект, через который будут загружены данные. В коде это выглядит так:

{
  view: "spreadsheet",
  id: "ssheet",
  url: "binary->sheet_data.xlsx",
  datatype: "excel"
}

или таким же образом через Load () Метод:

$$("ssheet").load("binary->sheet_data.xlsx", "excel");

Вы можете увидеть живую демонстрацию Здесь Анкет

Сохранение данных

Виджет электронной таблицы является полностью клиентским приложением. Но у него также есть специальный API для работы с сервером. Я упомянул некоторые из них в предыдущем разделе о загрузке данных сервера.

Кроме того, у вас есть возможность указать путь к сценарию сервера Ajax Запросы будут отправлены (через метод Post ). Это произойдет, когда вы внесете какие -либо изменения листа.

Для этого вы должны установить все Свойство по пути скрипта сервера в объекте свойства сохранения:

{
  view: "spreadsheet",
  url: "server/get_data.php", 
  save: {
    all: "/server"
  }
}

Вы можете увидеть живую демонстрацию Здесь Анкет

Теперь, если вы измените лист, все его данные (включая состояние виджета) будут автоматически отправлены на сервер. А для случаев, когда вам необходимо настроить отправку запросов на определенные действия с листами (добавление, переименование, обновление или удаление данных), вы можете установить Спокойный сохранение.

Чтобы отслеживать изменения листа, вы должны подписаться на Onchange событие и установите его на обработчик. Это можно сделать в на объект свойства. Внутри этого обработчика вы можете настроить отдельные запросы для каждой операции, которая будет отправлена автоматически при выполнении некоторой операции. Код виджета с обработчиком событий будет выглядеть следующим образом:

const server_url = "server/get_data.php"

{
  view: "spreadsheet",
  url: server_url,
  on:{
      onChange: function(mode, name, oldName){
        switch (mode) {
          case "update":
            webix.ajax().headers({ "Content-type" : "application/json" }).put(server_url+name, this.serialize());
            break;
          case "rename":
            webix.ajax().headers({ "Content-type" : "application/json" }).put(server_url+oldName, {name:name});
            break;
          case "remove":
            webix.ajax().headers({ "Content-type" : "application/json" }).del(server_url+name);
            break;
          case "insert":
            webix.ajax().headers({ "Content-type" : "application/json" }).post(server_url+name);
        }
      }
  } 
}

Вы можете увидеть живую демонстрацию Здесь Анкет

Вот как вы можете настроить сохранение информации на сервере. Стоит отметить, что виджет распределен вместе с Node.js Бэкэнд. Вы можете легко адаптировать его к любой базе данных, которая вам нужна.

Локализация

Одним из важных преимуществ всех виджетов Webix является простота локализации. И здесь стоит разъяснить, что по умолчанию все этикетки виджетов указаны на английском языке (locale en-us Но вы можете изменить текущую локаль или создать пользовательский. Давайте посмотрим на обоих этих вариантов.

Как изменить текущую локаль

Все переводы элементов интерфейса текущей локали хранятся в webix.i18n.spreadsheet объект. Вы можете локализовать следующие элементы интерфейса:

  • Все этикетки на панели инструментов
  • По мотивам инструментов
  • Все пункты меню.

Объект локали имеет следующую структуру:

export default {
  labels: {
    "common": "Common",
    "currency": "Currency",
    ...,
  },
  tooltips: {
    "color": "Font color",
    "background" : "Background color",
    ...
  },
  menus: {
    "remove-sheet": "Remove sheet",
    "rename-sheet": "Rename sheet",
    ...
  },
  table: {
    "math-error": "#ERROR!",
    "Math-ref-error": "#REF!",
    ...
  },
  liveEditor: {
    "edit": "Edit:"
  },
  formats: {
    "dateFormat": "mm/dd/yyyy",
    "timeFormat": "hh:mm AM/PM",
    ...
  }
};

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

Как создать пользовательскую локаль

Во втором подходе вы должны создать пользовательскую локаль с одинаковой структурой и применить его ко всему виджету. Для этого вам нужно добавить соответствующий перевод в webix.i18n.locales [localen] .spreadsheet объект и укажите его некоторое имя:

webix.i18n.locales["en-RU"].spreadsheet = {
  "labels": {
    "common": "General",
    "currency": "Currency",
    ...
  },
  "tooltips": {
    "color": "Text color",
    "background": "Background color",
    ...
  }, ...
};

Чтобы применить новый локаль, вы должны позвонить в setlocale () Метод объекта webix.i18n, передавая его пользовательское имя локали.

webix.i18n.setLocale("ru-RU");

Вы можете увидеть живую демонстрацию Здесь Анкет

Этот метод более предпочтительнее, потому что у вас есть возможность переключаться на исходную локаль в любое время.

Здесь также стоит упомянуть, что в библиотеке есть специальная платформа, где пользователи могут публиковать свои переводы. Вы можете проверить их в это Репозиторий GitHub.

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

Настройка

Если для вас недостаточно основных настроек, у вас есть возможность настроить интерфейс и функциональность виджета. И для этого вам нужно немного выкопать в коде виджет. Давайте посмотрим на некоторые связанные образцы настройки интерфейса и функциональности.

Как добавить дополнительную панель инструментов

Например, вы можете поместить любые компоненты между панелью инструментов и рабочим пространством, а также настроить их поведение. Для этого вам нужно использовать Подбар свойство. Вы можете установить его на конкретный компонент или макет с несколькими компонентами.

Для ясности давайте добавим дополнительную панель инструментов с кнопками для экспорта данных в различных форматах ( Excel, PNG, PDF и CSV ) Чтобы сделать его более удобным, вы можете сохранить конструктор панели инструментов в отдельную переменную. Вы должны установить Подбар Свойство к этой переменной в конфигурации виджета. В коде это выглядит так:

const extra_toolbar = {
  view: "toolbar", css: "webix_ssheet_toolbar", 
  elements:[
    { view: "button", value: "Export to Excel", click: 
 function(){
      webix.toExcel("ssheet");
    }},
    { view: "button", value: "Export to PNG", click: function(){
      webix.toPNG("ssheet");
    }},
    { view: "button", value: "Export to PDF", click: function(){
      webix.toPDF("ssheet", {autowidth: true});
    }},
    { view: "button", value: "Export to CSV", click: function(){
      webix.toCSV("ssheet");
    }},
    {}
  ]
};

webix.ui({
  id: "ssheet",
  view: "spreadsheet",
  subbar: extra_toolbar
});

Вы можете увидеть живую демонстрацию Здесь Анкет

Как вы уже заметили, библиотека предоставляет специальные методы для экспорта данных, что требует только идентификатора виджета. Данные будут загружены в требуемом формате после нажатия на соответствующую кнопку на дополнительной панели инструментов. В браузере вы увидите следующий результат:

Как настроить верхнее меню

Конфигурация виджета позволяет настроить его верхнее меню. Для ясности давайте посмотрим, как удалить некоторые параметры и добавить новые.

Во -первых, вам нужно создать массив с опциями верхнего меню. Для удобства вы можете хранить его в отдельной переменной:

const custom_menu = [
  { id: "file", submenu: [
    {id: "excel-import"},
    {id: "excel-export"}
  ]},
  { id: "custom-options", 
    value: "Custom Options", 
    submenu: [
      {id: "option-a", value: "Option A"},
      {id: "option-b", value: "Option B"},
      {id: "option-c", value: "Option C"}
    ]
  }
];

В приведенном выше коде, первый элемент массива определяет встроенный Файл вариант. Его раскрывающийся список вариантов отвечает за импорт и экспорт данных в формате Excel. И второй элемент – это Пользовательские параметры Элемент с раскрывающимся списком произвольных опций.

Теперь вы должны установить меню свойство для объекта, который хранится в переменной:

webix.ui({
  view: "spreadsheet",
  menu: custom_menu
});

А в браузере вы увидите следующий результат:

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

Панель инструментов виджета состоит из блоков, внутри которых есть кнопки, сгруппированные по определенным функциям. Вы можете управлять этими блоками (скрыть, показывать или добавить новые), а также настроить кнопки внутри блоков.

Чтобы изменить блоки панели инструментов, вам нужно использовать кнопки собственность, которая относится к кнопки коллекция. Эта коллекция содержит имена блоков в виде клавиш и массивов с именами кнопок в виде значений. Например, вы можете настроить текущую панель инструментов и включить только 2 встроенных блока, а также добавить новый блок с пользовательской кнопкой. В коде это выглядит так:

{
    view: "spreadsheet",
    buttons: {
        "undo-redo": ["undo", "redo"],
"format": ["format"],
        "Extra Block": [
        { view: "button", width: 150, label: "Custom Button" }
       ]
    }
}

А в браузере вы увидите следующий результат:

Чтобы определить пользовательскую панель инструментов, вам необходимо использовать свойство панели инструментов (что относится к коллекции панели инструментов) для объекта с соответствующими настройками. Внутри этого объекта вы должны сформировать свою пользовательскую структуру панели инструментов (в соответствии с принципом здания макета), установить размеры, отступы, стили и другие. Узнайте больше о настройке панели инструментов в Связанная статья Анкет

Вы можете увидеть живую демонстрацию Здесь Анкет

Вывод

В этой статье вы узнали о виджете электронной таблицы и его основных функциях. Фактически, эта публикация охватывает только верхушку айсберга всех возможностей, которые есть в инструменте. Как видите, это очень функциональный и гибкий компонент. Вы можете легко установить, настраивать и интегрировать его с помощью любой структуры или библиотеки, которые вам нужны. У вас также есть возможность настраивать взаимодействие с бэкэнд. Чтобы прочитать больше информации о возможностях и настройке, следуйте виджету Документация Анкет

Оригинал: “https://dev.to/serhiipylypchuk1991/webix-spreadsheet-is-it-a-full-fledged-web-alternative-to-excel-56p0”

Читайте ещё по теме: