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

Придайте вашей классической электронной таблице современный вид

Электронные таблицы, без сомнения, являются самым популярным бизнес–приложением – они широко используются во всех областях… С тегами электронных таблиц, веб, excel, java.

кэйкай (Серия из 5 частей)

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

В настоящее время электронные таблицы расширяют свой охват еще больше – они больше не находятся внутри настольного приложения Excel пользователя, теперь они широко используются в Интернете, либо внедряются в приложения, либо запускаются на онлайн-платформе, такой как Google sheets. Но когда электронная таблица выходит в Интернет, можем ли мы сделать больше, чем просто дублировать функции Excel в браузере?

Больше, чем Электронная таблица

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

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

Позвольте мне показать вам, как создать эту страницу.

Загрузите форму

Я могу загрузить свой helpTemplate.xlsx в azul, указав src в <электронная таблица/> .

Другие атрибуты тега определяют внешний вид электронной таблицы; пожалуйста, обратитесь к Ссылка разработчика Keikai .

Поместите страницу справки вместе с Keikai

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

Затем я использую <включить> компонент, чтобы включить этот HTML-код справки в <ящик> .
  • visible="false" означает, что по умолчанию он скрыт, поэтому сначала вы не увидите ящик. Но пользователи могут щелкнуть ячейку “Справка”, чтобы отобразить справку.

Обратите внимание, это всего лишь простой пример; вы определенно можете поместить любой другой HTML-контент (изображения, видео…) на страницу справки в зависимости от вашего собственного контекста.

Разрешить пользователям показывать страницу справки

Чтобы отобразить панель справки, когда пользователь нажимает кнопку справки (ячейка), мне нужно добавить прослушиватель событий для события щелчка ячейки в контроллере. Keikai поддерживает шаблон MVC, поэтому лучше реализовать логику моего приложения в контроллере с лучшим дизайном OO. Контроллер выглядит так:

public class HelpTextComposer extends SelectorComposer {

    @Wire
    private Drawer helpDrawer;

    @Listen(Events.ON_CELL_CLICK + " = spreadsheet")
    public void showHelpText(CellMouseEvent e){
        Range cell = RangeHelper.getTargetRange(e);
        if (cell.getCellValue() != null 
          && cell.getCellValue().toString().equals("Help")) {
            helpDrawer.open();
        }
    }
}
  • SelectorComposer помогает мне получить ссылку на справочный ящик , экземпляр которого создан ZK framework . Вот почему я объявляю переменную Ящик без создания экземпляра ее объекта.
  • @Listen может зарегистрировать метод в качестве прослушивателя событий для Событий. ON_CELL_CLICK электронной таблицы. Поэтому, когда пользователь нажимает на ячейку, ZK вызовет этот метод.
  • Дальнобойщик.дальнобойщик(e) возвращает Диапазон , представляющий выбранную ячейку. Затем я могу проверить значение ячейки с помощью cell.getcellvalue().toString() , чтобы узнать, нажимает ли пользователь ячейку “Справка” или нет.
  • помогите ящику.открыть() заставляет ящик скользить внутрь.

Резюме

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

исходный код

Вы можете просмотреть полный исходный код в Справочном репозитории разработчиков Keikai .

кэйкай (Серия из 5 частей)

Оригинал: “https://dev.to/hawkchen/give-your-classic-spreadsheet-a-modern-touch-58dg”