Мы представляем Webix 11.4 – релиз с улучшениями сразу в нескольких ключевых компонентах. В него входят расширенные возможности Webix Core, Kanban и Rich Text Editor, а главный акцент сделан на SpreadSheet, который получил серьёзные обновления в функциональности и API. Давайте подробнее рассмотрим, что появилось в библиотеке.
Обновления Webix Core
Поддержка осевых подписей
В виджете Slider появилась поддержка осевых подписей – меток, которые отображаются вдоль его горизонтальной или вертикальной оси. Подписи генерируются автоматически, при необходимости их можно кастомизировать. Данная фича делает слайдеры более информативными и визуально понятными.
Чтобы активировать новую функциональность, задайте axisTitles:true, а также укажите значения min, max и step в конфигурации Slider – компонент использует эти свойства для создания подписей.
Подробные примеры использования, включая варианты кастомизации, можно посмотреть в этом сниппете.
Множественное выделение областей
В релизе 11.4 в Webix Core появилась поддержка множественного выделения областей конечными пользователями. Новая возможность дополняет существующий механизм программного применения множественного выделения через специализированный API. Теперь пользователи могут выбирать как отдельные ячейки, так и диапазоны с помощью Ctrl+click и Ctrl+drag. Это упрощает одновременную работу с разными фрагментами данных, что особенно актуально для таких компонентов, как DataTable и SpreadSheet.
Обновления Kanban
Поддержка Markdown
В этот раз мы расширили возможности виджета Kanban, добавив поддержку Markdown, что значительно упростило работу с контентом, созданным AI-ассистентами. Ранее эта возможность появилась в Rich Text Editor. Теперь вы можете копировать текст из ваших любимых AI-инструментов и вставлять его в карточки Kanban с сохранением форматирования.
Чтобы активировать эту функцию, добавьте свойство textFormat в конфигурацию Kanban и установите для него значение "markdown". По умолчанию используется значение "text".
view:"kanban",
textFormat:"markdown",
/* структура, данные и другие настройки */
});
Обратите внимание, что наш парсер Markdown не поддерживает вложенные структуры (кроме bold внутри italic). На практике это означает, что если вы вставите, например, жирный текст внутри ссылки, курсив внутри элемента списка или многоуровневые списки в карточку, они будут отображаться некорректно.
Мы намеренно сделали наш встроенный парсер Markdown минималистичным, но мы не ограничиваем вас – при необходимости вы можете заменить его на любое другое решение. Для этого достаточно переопределить свойство templateBody в карточках:
name: "cards",
templateBody: function(obj){
// markdownToHtml можно заменить любым сторонним парсером по вашему выбору
return `<div class="webix_kanban_body_markdown">${this.markdownToHtml(obj.text)}</div>`;
}
});
Обновления SpreadSheet
Группировка строк и столбцов
В этом релизе мы добавили в SpreadSheet поддержку группировки. Теперь вы можете создавать группы строк и столбцов, а затем сворачивать и разворачивать их по необходимости. Это значительно упрощает работу со сложными таблицами: например, можно улучшить читаемость данных, показывая только те разделы, которые относятся к текущей задаче, и скрывая остальные. Допускается создание вложенных групп – до восьми уровней иерархии.
Чтобы применить группировку, выделите ячейки в строках или столбцах, которые нужно сгруппировать или разгруппировать, и используйте сочетания клавиш Alt+Shift+Right для группировки и Alt+Shift+Left для разгруппировки. Эти горячие клавиши открывают диалоговое окно, в котором можно выбрать, к каким элементам применять действие – к строкам или столбцам. Вы также можете сделать это через соответствующие опции в Toolbar, Menubar и контекстном меню.
Вы также можете управлять группировкой через API – подробная документация доступна здесь.
Множественное выделение областей
Функция множественного выделения областей появилась не только в Webix Core, но была также добавлена в SpreadSheet. Теперь вы можете легко выделять несмежные области и применять форматирование, удалять значения или заполнять ячейки формулами сразу в нескольких отдельных диапазонах.
Множественное выделение в SpreadSheet также поддерживается на уровне API: вы можете передавать ссылки на несколько диапазонов (например, A1:C3;B4:D5), чтобы программно применять стили, удалять, получать и задавать значения ячеек.
Улучшенная сортировка
В этом релизе был обновлен алгоритм сортировки в SpreadSheet. Ранее сортировка применялась строго к выделенной области и не сохраняла целостность строк.
Теперь каждая строка рассматривается как единое целое. Это означает, что при сортировке выделенного диапазона все ячейки строки перемещаются вместе, полностью сохраняя логическую структуру данных. Такое поведение делает сортировку интуитивной и безопасной для таблиц, содержащих формулы, ссылки или структурированные записи.
В связи с данным изменением в контекстное меню был добавлен новый пункт Sort Range со следующими опциями для сортировки: Ascending, Descending и Custom Sort. В Menubar теперь есть два пункта с опциями: Sort Range для операций над текущим выделенным фрагментом и Sort Sheet, который работает со всем листом. Обратите внимание, что сортировка не поддерживается при множественном выделении областей.
Что касается существующего метода sortRange – он остается полностью совместимым, но теперь поддерживает расширенный объект конфигурации, позволяющий указать сортируемый столбец, направление сортировки и учитывать наличие заголовков в диапазоне.
hasHeaders: true,
levels: [
{ column: "C", direction: "desc" },
{ column: "A", direction: "asc" }
]
});
Транспонирование: переворачиваем строки и столбцы
SpreadSheet теперь позволяет менять местами выбранные строки и столбцы при вставке данных. Это даёт возможность перестраивать набор данных с сохранением форматирования – например, преобразовывать горизонтальные заголовки в вертикальные списки и наоборот.
Функция доступна через контекстное меню SpreadSheet: скопируйте нужные ячейки, затем выберите Special paste → Paste transposed, чтобы поменять местами горизонтальные и вертикальные значения.
Статистика для выделенного диапазона ячеек
Webix SpreadSheet теперь предоставляет статистику для области, которую вы выделяете на листе. Если вы когда-либо работали с Google Sheets или Excel, эта функция будет для вас интуитивно понятной, так как использует аналогичную логику. При выборе диапазона ячеек в правом нижнем углу виджета, рядом с элементами управления масштабированием, теперь отображаются значения Sum, Average, Min, Max, Count и Numerical Count.
Эта новая возможность упрощает работу с данными: пользователи могут проверять значения без использования формул, сверять результаты вычислений и анализировать данные «на лету».
SpreadSheet использует ту же логику, что и Google Sheets, для операций с выделенным диапазоном: для Sum, Average, Min и Max учитываются только числовые данные, а текст и пустые ячейки игнорируются; Count показывает количество ячеек, содержащих любые данные, а Numerical Count – количество ячеек с числовыми значениями
Ресайз колонок на сенсорных устройствах
В одном из недавних релизов мы добавили ресайз колонок для сенсорных и гибридных устройств в Webix Grid*. В текущем обновлении инженеры Webix реализовали ту же опцию в SpreadSheet. Теперь пользователи могут изменять ширину колонок в SpreadSheet, подстраивая их под удобный формат для просмотра и редактирования данных на мобильных устройствах.
Вы можете активировать эту возможность с помощью нового свойства tableConfig, установив icon:true в конфигурации resizeColumn.
view:"spreadsheet",
data:spreadsheet_data,
tableConfig:{
resizeColumn:{icon:true}
}
});
Live demo >>
Протестировать на мобильном устройстве >>
Свойство icon, установленное в значение true, активирует динамическое изменение размера столбцов по умолчанию. Это означает, что таблица будет обновляться в реальном времени по мере перетаскивания значка ресайза.
Хотя динамическое изменение ширины колонок — очень удобная опция, имейте в виду, что она требует больше ресурсов. Поэтому мы рекомендуем отключать её, если ваш SpreadSheet работает с большим количеством колонок. Чтобы деактивировать функцию, установите live: false в конфигурации объекта resizeColumn.
view:"spreadsheet",
data:spreadsheet_data,
tableConfig:{
resizeColumn:{icon:true, live: false}
}
});
* Webix Grid — это самостоятельный продукт, выпускаемый независимо от основной библиотеки. Все обновления, добавленные в Grid, также применяются к компоненту DataTable в Webix Core.
Excel-подобная отрисовка и типы границ
Поведение границ ячеек в стиле Excel теперь доступно в SpreadSheet. Изначально виджет использовал модель, при которой для каждой ячейки отрисовывались все четыре границы. В этом релизе мы добавили поддержку Excel-подобных общих границ, чтобы улучшить совместимость с файлами Excel.
Новый режим можно включить, установив свойство borderCollapse в значение true. По умолчанию borderCollapse имеет значение false при котором SpreadSheet использует дефолтное поведение и добавляет все четыре границы к каждой ячейке.
view:"spreadsheet",
toolbar:"full",
borderCollapse:true,
//other settings here
});
Вот как будут выглядеть ячейки при включенном новом режиме:
Excel-подобные границы
Сравните с отображением границ по умолчанию:
Дефолтные границы
В этом обновлении мы расширили перечень типов границ, поддерживаемых SpreadSheet, добавив семь новых вариантов: hair, dashDotDot, dashDot, mediumDashDotDot, slantDashDot, mediumDashDot, mediumDashed. Теперь компонент поддерживает все типы, доступные в Excel, и корректно сохраняет их при импорте и экспорте.
Помимо добавления новых, мы также обновили несколько уже существующих типов границ, чтобы они выглядели так же, как в Excel:
- hair теперь выглядит так же, как ранее выглядел dotted (точечная линия 1px)
- dotted отображается так, как раньше отображался dashed (штриховая линия 1px)
- dashed получил новый обновленный стиль
Типы границ доступны в тулбаре через Borders → Border line type:
Ознакомьтесь с этим демо, чтобы увидеть все типы границ, которые теперь есть в SpreadSheet.
Более подробную информацию о работе нового режима отрисовки границ и о том, как настроить SpreadSheet для корректного применения границ, вы можете найти в документации.
Обновленный API
В этом релизе представлены обновления API, которые упрощают настройку таблицы SpreadSheet, выполнение вычислений в коде и управление отображением пользовательских формул. Ниже приведён краткий обзор новых возможностей:
- свойство tableConfig предоставляет прямой доступ к конфигурации таблицы SpreadSheet. Теперь вы можете настраивать внешний вид и поведение таблицы, определяя пользовательский CSS, высоту строк, ресайз колонок и т. д. Пример кода.
- метод calculate(math, page) позволяет применять формулы и вычислять их значения программно. Пример кода.
- метод $mathTemplate определяет, как результат формулы визуально отображается в ячейке. Работает вместе с registerMathMethod, который задает внутреннее значение, возвращаемое формулой и используемое в последующих вычислениях. Пример кода.
Обновления Rich Text Editor
Drag-and-drop для изображений
Rich Text Editor теперь поддерживает перетаскивание изображений в рабочей области редактора. Пользователи могут размещать изображения именно там, где им нужно, без использования Toolbar, Menubar или контекстного меню. Эта новая возможность ускоряет работу с контентом, насыщенным визуальными элементами, упрощая перемещение и позиционирование изображений.
Вставка текста как Markdown
Ранее Rich Text Editor обрабатывал вставку следующим образом: любой вставленный текст автоматически преобразовывался в Markdown. В некоторых случаях это приводило к нежелательным результатам — например, когда пользователи хотели добавить в редактор обычный текст или когда вставляемый фрагмент содержал Markdown‑синтаксис, который редактор поддерживает не полностью (например, вложенные структуры).
Теперь Rich Text Editor по умолчанию вставляет контент как обычный текст. Если вам нужно вставить Markdown, вы можете воспользоваться новой опцией Paste from Markdown в Menubar или контекстном меню.
Поддержка встроенных изображений
Теперь пользователи могут добавлять изображения в Rich Text Editor даже при отсутствии эндпоинта для загрузки. Ранее требовался действительный URL – иначе попытка вставить изображение через тулбар или меню приводила к ошибке. Теперь URL для загрузки является необязательным.
Если значение upload не указано, редактор автоматически вставляет изображения как встроенные, кодируя их в base64. Это означает, что вставка изображений работает «из коробки» и не требует дополнительной настройки.
Это улучшение делает Rich Text Editor более гибким и удобным в средах без выделенного хранилища файлов. Пример вставки встроенных изображений можно посмотреть в этом сниппете.
API: метод InsertValue
В API Rich Text Editor был добавлен метод insertValue(), который позволяет добавлять значения на текущую позицию курсора. В отличие от setValue(), который заменяет все содержимое, новый метод дает возможность обновлять отдельные части текста, не сбрасывая весь контент редактора.
Метод поддерживает следующие форматы: HTML (по умолчанию), Markdown, plain text и raw.
$$("editor").insertValue(md, "markdown");
Вот пример кода, демонстрирующий метод в действии.
Другие обновления
Актуальный перечень обновлений Webix доступен на странице What’s New. Для получения последней версии библиотеки обновите её через npm, Client Area или воспользуйтесь кнопкой ниже. Если у вас есть вопросы или предложения – ждем вас на нашем форуме.
