Мы рады представить вам версию Webix 11.2, при разработке которой мы учли актуальные тренды и обратную связь от наших пользователей. В этом релизе мы обновили Webix Core, улучшив удобство использования Webix Grid, расширили функциональные возможности SpreadSheet и Gantt, а также внесли другие важные изменения для оптимизации работы библиотеки.
Обновления Webix Core
Мы начнём обзор новых возможностей с обновлений Webix Core, которые делают работу с библиотекой на сенсорных устройствах удобнее и обеспечивают большую гибкость при работе с Google картами.
Тач-ресайз колонок в Datatable
На этот раз ключевым обновлением стала возможность изменять ширину столбцов в Webix Grid* на сенсорных устройствах. Эта фича значительно повышает удобство использования виджета, делая его доступнее для пользователей планшетов и смартфонов. Теперь вы можете просто перетащить специальный значок в хедере или футере таблицы, чтобы изменить ширину столбца на сенсорном экране.
Чтобы активировать возможность изменения ширины столбцов, установите новое свойство resizeColumn в значение true:
resizeColumn: { icon: true },
});
Свойство icon, установленное в значение true, активирует динамическое изменение размера столбцов по умолчанию. Это означает, что таблица будет обновляться в реальном времени по мере перетаскивания значка ресайза.
Онлайн-демо Webix Grid >>
Протестируйте на мобильном устройстве >>
Онлайн-демо Datatable >>
Протестируйте на мобильном устройстве >>
Данный подход улучшает отклик таблицы в реальном времени, но оказывает более заметное влияние на производительность по сравнению с базовым режимом изменения размера, при котором перерисовка содержимого происходит после завершения перетаскивания.
Для поддержания оптимальной производительности рекомендуем отключить динамическое изменение размера в таблицах с большим количеством столбцов. Для этого установите новое свойство live в конфигурации объекта resizeColumn в значение false:
resizeColumn: { icon: true, live: false },
});
Онлайн-демо Webix Grid >>
Протестируйте на мобильном устройстве >>
Онлайн-демо Datatable >>
Протестируйте на мобильном устройстве >>
Еще один важный момент, на который мы бы хотели обратить внимание: новая функция изменения размера разработана таким образом, что свойства icon и live не влияют на существующий режим изменения размера в любой конфигурации – и наоборот.
*Чуть больше месяца назад мы представили Webix Grid как самостоятельный продукт. Все обновления, который получает Grid, также получает и datatable в Webix Core.
Расширенные маркеры в Webix GoogleMap
Еще одно важное обновление связано с переходом от простых к расширенным Google маркерам. Данный тип маркеров интегрирован в Webix GoogleMap – виджет, предназначенный для работы с географическими данными.
Расширенные маркеры предоставляют более гибкие возможности кастомизации: они могут содержать произвольный HTML-контент и поддерживают интерактивное поведение – например, раскрытие по клику. Кроме того, они позволяют применять JavaScript и CSS для анимации, в отличие от простых маркеров, в которых для этого использовались встроенные методы.
С переходом на новый тип маркера конфигурация виджета Webix GoogleMap получила дополнительные свойства:
- mapId – обязательное свойство, которое содержит уникальный идентификатор. С его помощью активируется расширенный функционал и обеспечивается контроль над поведением и стилем карты;
- template – функция, позволяющая задавать собственную логику рендеринга для расширенных маркеров и создавать полностью кастомизированные элементы. Например, вы можете изменить стиль стандартного элемента pin (PinElement) – его размер, цвет и другие параметры.
Обновления SpreadSheet
В версии 11.2 SpreadSheet получил ряд значимых обновлений, направленных на оптимизацию рабочего процесса и повышение удобства использования. Давайте рассмотрим новые функциональные возможности виджета, включая расширенное API.
Автозаполнение для дней и месяцев
В версии 11.2 в SpreadSheet появилась новая функция автозаполнения дней недели и месяцев, которая упрощает ввод данных. Чтобы увидеть, как она работает, выберите ячейку (или диапазон ячеек) и наведите курсор на правый нижний угол, пока не появится маркер заполнения (значок «плюс»). Затем перетащите маркер в нужном направлении – горизонтально или вертикально – чтобы автоматически заполнить ячейки значениями.
Новая функция базируется на локали и использует значения из объекта webix.i18n.calendar, включая свойства dayShort, dayFull, monthShort и monthFull. Благодаря этому автозаполнение поддерживает как сокращенные, так и полные форматы названий дней недели и месяцев.
При автозаполнении также учитывается исходный регистр. Если пользователь вводит значения строчными (например, янв, январь) или заглавными буквами (например, ЯНВ, ЯНВАРЬ), SpreadSheet применяет соответствующий регистр при заполнении. Во всех остальных случаях (например, ЯНв, ЯНварь) регистр определяется согласно правилам форматирования, заданным текущей локалью.
Новая категория методов для массивов
На этот раз инженеры Webix представили в SpreadSheet новую группу методов – array (методы работы с массивами). Помимо существующих категорий – common, text, number, date и financial – пользователи теперь имеют доступ к функциям динамических массивов*. Новые встроенные функции Excel позволяют фильтровать, сортировать массивы, преобразовывать данные в отдельные строки или столбцы, разделять текст на структурированные массивы и многое другое.
Если же вы хотите реализовать функциональность сводных таблиц, аналогичную методам GROUPBY и PIVOTBY в Excel, мы можем предложить вам руководство по преобразованию данных из SpreadSheet в Pivot.
Для активации данной группы методов добавьте параметр methods с названием категории array в конфигурацию SpreadSheet:
view: "spreadsheet",
toolbar: "full",
methods: "array",
});
В качестве альтернативы вы можете установить параметр methods в значение “all”, тем самым активируя все категории методов, включая array:
view: "spreadsheet",
toolbar: "full",
methods: "all",
});
* Обратите внимание, что функции динамических массивов появились в последних версиях Excel. В зависимости от версии пользователя они могут быть доступны не всем получателям экспортированного файла.
Общая структура меню и тулбара
Теперь тулбар и меню SpreadSheet содержат одинаковый набор элементов для выполнения одних и тех же операций. Это упрощает их настройку и расширение.
Унифицированная структура и операции
Мы переработали и унифицировали внутреннюю структуру тулбара и меню SpreadSheet.
Теперь оба компонента используют одинаковую конфигурацию JSON. Те же идентификаторы, настройки, текст меток и подсказок, те же операции. Мы оставили меню простым, исключив некоторые операции со сложным вводом, такие как выбор цвета и границ.
Также были внесены изменения в конфигурацию и локализацию, поэтому, пожалуйста, ознакомьтесь с руководством по миграции.
Улучшенная локализация
Мы обновили структуру локали для более удобной локализации названий пунктов меню, всплывающих подсказок тулбара и пользовательских элементов меню.
Мы перенесли весь общий текст, отображаемый в меню и тулбаре, в общую группу и оптимизировали способ локализации этих компонентов. Подробную информацию вы найдёте в документации.
Возможность задавать формат через контекстное меню
Теперь пользователи SpreadSheet могут задавать формат для всей строки или колонки через контекстное меню. Новая функция дополняет уже существующую возможность изменять формат, кликнув по заголовку строки или столбца и выбрав нужный вариант из раскрывающегося списка в тулбаре (раздел «Number»).
Наследование форматов
В предыдущих версиях при добавлении строки или столбца в SpreadSheet, новые ячейки наследовали формат common по умолчанию.
Начиная с текущей версии, для новых строк и столбцов реализовано умное форматирование:
- ячейки в новых строках наследуют форматирование ячеек из строки, расположенной выше;
- ячейки в новых столбцах наследуют форматирование ячеек из столбца, расположенного слева.
Обновление метода getFormat
В рамках данного релиза мы продолжили совершенствовать API SpreadSheet. На этот раз был обновлён метод getFormat, впервые представленный в версии 11.1 и предназначенный для получения названия формата ячейки.
Теперь метод возвращает объект, содержащий как имя формата, так и сам формат, т.е. правила форматирования, применяемые к ячейке. Протестировать новые возможности метода можно в данном сниппете. Также, обновленный функционал представлен в примере ниже:
webix.message(JSON.stringify(name));
//{"name":"price","format":"[>=0][$$]#,0.00;[<0]-[$$]#,0.00"}
Новый метод getCellType
Раньше для извлечения типа ячейки разработчикам приходилось сериализовать весь набор данных SpreadSheet, что могло быть ресурсоемким при работе с большими объемами данных.
Мы позаботились об этом и расширили API SpreadSheet новым методом getCellType, который позволяет получить тип конкретной ячейки без дополнительных действий.
Ознакомьтесь с примером кода ниже или используйте данный сниппет, чтобы увидеть, как работает новый метод.
Новый параметр loadStyles
SpreadSheet хорошо справляется с обработкой больших объемов данных, но для массивных файлов импорт стилей может существенно снизить производительность. Для таких особых случаев мы добавили возможность полностью игнорировать стили.
Теперь вы можете управлять импортом стилей Excel в ваш SpreadSheet с помощью параметра loadStyles, который можно установить в значение true или false. По умолчанию используется true, что означает загрузку файлов со всеми связанными стилями. Но вы можете установить loadStyles в false, чтобы отключить импорт стилей.
Обновление Gantt
В версии 11.2 компонент Gantt получил обновление, позволяющее автоматически скроллить диаграмму к определенной дате. Для активации данной функции, добавьте новое свойство date в конфигурацию Gantt и укажите нужную дату. Диаграмма автоматически проскроллится к указанной дате. Убедитесь, что дата находится в пределах начального и конечного диапазона диаграммы – в противном случае прокрутка произойдёт к началу или концу шкалы.
Другие обновления
Полный перечень изменений и новых функций, добавленных в текущем релизе Webix, доступен на странице What’s New. Чтобы получить новую версию библиотеки, обновите ее через npm, Client area или кликните по большой фиолетовой кнопке ниже.
