Вся наша команда рада объявить о выпуске DHTMLX Spreadsheet 5.0. Это крупное обновление в первую очередь направлено на расширение списка возможностей для изменения структуры электронной таблицы на лету и легкого управления табличными данными. Например, новая версия нашей Библиотеки электронных таблиц JavaScript позволяет выполнять поиск и фильтрацию данных, объединять и разбивать ячейки, автоматически регулировать ширину столбца таблицы, вставлять ссылки в содержимое таблицы, применять форматирование текста с зачеркиванием и многое другое. Почти все эти долгожданные функции доступны через API и пользовательский интерфейс.

Давайте подробнее рассмотрим, как новинки версии 5.0 могут использоваться как веб-разработчиками, так и конечными пользователями.

Загрузить ознакомительную версию DHTMLX Spreadsheet v5.0 ›

Поиск данных

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

Конечные пользователи могут выполнить эту операцию через панель поиска, которая открывается двумя способами:

  • щелкнув любую ячейку электронной таблицы и нажав комбинацию Ctrl (Cmd) + F,
  • выбрав Данные > Поиск в разделе меню.

Следует отметить, что поиск осуществляется только в пределах открытого рабочего листа. Все результаты будут выделены прямо в сетке и могут быть просмотрены с помощью стрелок панели поиска или горячих клавиш Ctrl (Command) + G (предыдущий) / Ctrl (Command) + Shift+ G (следующий). По умолчанию все поиски не чувствительны к регистру.

Чтобы найти определенную информацию в электронной таблице через API, вы должны использовать недавно добавленный метод search(). Он принимает 3 необязательных параметра:

  • text — указывает значение поиска,
  • openSearch — если установлено значение true, открывает окно поиска и выделяет результаты, соответствующие введенному запросу (по умолчанию false),
  • sheetID — служит для идентификации листа, на котором следует выполнять поиск. Если не задать значение этого параметра, поиск будет выполняться на активном в данный момент листе.

Например, найти всю статистику доходов за февраль в соответствующем листе можно следующим образом:

spreadsheet.search("feb", true, "Income");

Существует также новый метод hideSearch(), который закрывает панель поиска:

spreadsheet.hideSearch();

Фильтрация данных

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

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

  • нажав кнопку Фильтр на панели инструментов,
  • выбрав Данные > Фильтр в разделе меню.

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

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

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

  • Фильтрация по условию

  • Фильтрация по значениям

Говоря о реализации фильтрации данных через API, следует вызывать метод setFilter().

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

Например, вы можете отобразить ячейки в столбце C, где числовые значения не находятся между 5 и 8, за исключением 3,75, как в примере ниже:

spreadsheet.setFilter("C1",[{}, {},{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]);

Теперь давайте рассмотрим, как использовать метод setFilter() для указания критериев фильтрации для двух столбцов на следующем примере:

spreadsheet.setFilter("C1:D20", [{condition: {factor: "ib", value: [5,8]}}, {exclude: [740]}]);

В этом случае к столбцу C применяется первое условие, а именно «между 5 и 8», а для столбца D работает условие исключения 740.

Для сброса фильтра нужно вызвать метод setFilter(), указав только первый параметр ячейки или вообще не указывая никаких параметров.

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

Объединение и разделение ячеек

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

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

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

На стороне кодирования эта функция включается с помощью метода mergeCells(). Все, что вам нужно сделать, это просто указать диапазон ячеек, которые должны быть объединены в первом параметре.

spreadsheet.mergeCells("A6:A8");

Тот же метод используется для разделения объединенных ячеек. Это делается путем добавления второго параметра со значением true.

spreadsheet.mergeCells("A6:A8",true);

В объекте листа появилось новое свойство merged, предназначенное для определения диапазона ячеек для слияния.

Автоматическая ширина столбца

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

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

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

spreadsheet.fitColumn("G2");

Гиперссылки в содержимом ячейки

Начиная с версии 5.0 содержимое ячеек электронных таблиц на основе DHTMLX может содержать гиперссылки. Обычно в ячейках используются гиперссылки, чтобы направлять конечных пользователей к онлайн-документам или ресурсам, имеющим отношение к данной электронной таблице.

На практике конечным пользователям предоставляется три способа вставки гиперссылок в ячейки:

  • Кнопка Вставить ссылку на панели инструментов
  • Комбинация горячих клавиш (Ctrl (Command) + K)
  • контекстное меню ячейки

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

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

spreadsheet.insertLink("A2", {
   text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/"
});

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

spreadsheet.insertLink("A2");

Это основные функции, реализованные в DHTMLX Spreadsheet 5.0.

Источник: релизная статья, опубликованная 17 ноября 2022 г. в блоге DHTMLX.