Загрузить содержимое виджета LabArchives для электронных таблиц

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

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

Обобщенный код для реализации выходной таблицы доступен в моем репозитории GitHub по адресу https://github.com/gibson-amandag/LabArchivesWidgetTemplates/tree/main/_commonComponents/show-calc-save-copyTable

gibson-amandag / LabArchivesWidgetTemplates
Файлы шаблонов для создания и разработки виджетов для электронных исследовательских записных книжек LabArchives… github.com

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

Для этого я создаю «таблицу вывода» со столбцами, расположенными в соответствии с моим файлом Excel. Затем значения ввода из формы можно использовать для заполнения таблицы.

Заполнить таблицу

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

//When text is input for column c, update the table
$("#ColumnC").on("input", function () {
  var $elToWatch = $(this);
  var $elToUpdate = $("#ColumnC_calc");
  my_widget_script.watchValue($elToWatch, $elToUpdate)
});

Я добавляю этот кусок в метод addEventListeners. Метод watchValues принимает значение входного элемента $elToWatch, а затем обновляет $elToUpdate этими значениями. Этот $elToUpdate также может быть class, а не id, как показано здесь, что упрощает обновление нескольких частей страницы с сохранением значения.

Вы также можете автоматизировать это дополнительно, добавив класс к элементам формы, которые вы хотите использовать для заполнения своей таблицы или других элементов на странице. Пользуюсь классом simpleCalc. Затем, когда я разрабатываю HTML-код выходной таблицы, я добавляю класс к выходным ячейкам, где имя класса является идентификатором отслеживаемого элемента с добавлением _calc в конце. Когда я обновляю элемент с классом simpleCalc, код Javascript получит идентификатор этого элемента, добавит _calc в конец и использует мою функцию watchValues() для обновления всех выходных ячеек со значением моих элементов формы ввода.

HTML-код для расчета столбца C может выглядеть примерно так:

<div class="col"><input type="text" class="fullWidth simpleCalc" id="ColumnC" name="columnc"></div>
....
<td class="ColumnC_calc">&nbsp;</td>

Рассчитать значения

Или вы можете использовать кнопку Calculate Values, чтобы подождать и обновить сразу несколько значений. Как обсуждалось выше, я также указал, что столбец B должен быть заполнен для таблицы. При нажатии кнопки Calculate Values или любой другой кнопки в строке я сначала проверяю, верны ли данные, и обновляю сообщение об ошибке, а затем запускаю calcValues.

$('#calculate').on("click", function () {
  //run to give error, but allow to calc regardless
  my_widget_script.data_valid_form();
  my_widget_script.calcValues();
});

calcValues ()

Эта функция получает значение входных данных столбца A и столбца B и обновляет соответствующие элементы в выходной таблице. Если в таблице есть пустые значения или значения NaN, он меняет их на NA, что я предпочитаю для анализа с помощью R.

data_valid_form ()

Этот метод проверяет каждый элемент с классом needForTable. Если для любого из этих элементов нет значения, он изменяет состояние value на false. Вы можете раскомментировать строки name и fail_log, чтобы отобразить для пользователя предупреждение о том, какие элементы необходимо заполнить. В настоящее время, если данные недействительны, он просто обновляет сообщение об ошибке (errorMsg), чтобы попросить пользователя заполнить необходимые элементы. Если данные действительны, сообщение об ошибке удаляется. Возвращается состояние valid, поэтому его можно использовать для принятия решений в других функциях.

Показать / скрыть таблицу

Кнопка toggleTable используется для отображения или скрытия выходной таблицы (outTable). Опять же, я убеждаюсь, что данные имеют значение, я пересчитываю значения, чтобы убедиться, что они актуальны, а затем переключаю таблицу и изменяю размер контейнера, чтобы убедиться, что все подходит должным образом. Первый вызов моего resize метода важен, если вы используете ширину окна для изменения ширины таблицы <div>, так как вы хотите обновить это перед отображением таблицы.

$("#toggleTable").on("click", function () {
  my_widget_script.resize();
  my_widget_script.data_valid_form(); 
  my_widget_script.calcValues();
  $("#tableDiv").toggle();
  my_widget_script.parent_class.resize_container();
});

Сохранить CSV

$('#toCSV').on("click", function () {
  var fileName //TO DO add fileName
  var tableID //TO DO add tableID
  var $errorMsg //TO DO add error message as jQuery
  my_widget_script.toCSVFuncs(fileName, tableID, $errorMsg);
});

Эти функции сохраняют содержимое outTable в файл CSV. В этом случае, если метод data_valid_form возвращает значение false, я не запускаю функцию экспорта и обновляю сообщение об ошибке, чтобы указать на это. Если данные верны, я пересчитываю значения и экспортирую таблицу в CSV.

exportTableToCSV ()

Этот метод используется для получения содержимого outTable и создания CSV с этими значениями. Он собирает rows таблицы. Затем для каждой строки выполняется поиск элементов <td> и <th>, которые являются столбцами cols. Для каждого элемента cols он получает текст этих ячеек и добавляет его в массив row. Затем эти разные ячейки объединяются в одну строку, причем каждая ячейка разделяется запятой ,. row добавляется к массиву csv, а затем отдельные строки этого массива csv объединяются в одну строку, разделенную \n, маркером новой строки. Он передается с именем файла методу downloadCSV.

скачатьCSV ()

Этот метод берет csv, созданный exportTableToCSV, и создает ссылку в объектной модели документа, по которой он затем щелкает, чтобы начать загрузку файла CSV. Исходный источник этих двух функций находится здесь: ttps: //www.codexworld.com/export-html-table-data-to-csv-using-javascript/

Копировать данные

copyDataButton копирует outTable содержимое в буфер обмена, который затем может быть вставлен в программу для работы с электронными таблицами, такую как Google Таблицы или Excel. С помощью флажка «Копировать заголовок таблицы» пользователь может указать, хочет ли он также заголовок таблицы или только тело, когда нажимает Copy Data. Поскольку я часто вставляю данные в уже существующую таблицу, мне обычно нужны только сами данные, а не имена столбцов. Когда кнопка нажата, я снова проверяю, все ли элементы needForTable заполнены, а также проверяю состояние флажка copyHead. Я пересчитываю значения таблицы. Если данные верны, я показываю таблицу, запускаю метод copyTable и сообщаю пользователю, что таблица была успешно скопирована. Если данные недействительны, я обновляю сообщение об ошибке, чтобы сообщить им, что ничего не было скопировано. Я также добавил возможность транспонировать таблицу.

$("#copyDataButton").on("click", function () {
    var $copyHead //TO DO add table
    var $tableToCopy //TO DO add table
    var $tableDiv //TO DO add tableDiv
    var $errorMsg //TO DO add error message
    var $divForCopy //TO DO add div where the table copies to
    var $transpose //TO DO add transpose checkbox
    my_widget_script.copyDataFuncs($copyHead, $tableToCopy, $tableDiv, $errorMsg, $divForCopy, $transpose)
});

copyTable ()

Эта функция сначала создает временный <textarea>, $temp. Однако, как описано в статье Советы и хитрости, в редакторе сценариев не может быть фактического тега <textarea>, поскольку страница считает, что выходит из поля редактора сценария, и избавляется от остальной части сценария. Следовательно, это должно быть разделено и преобразовано в строку.

Эта функция создает массив rows и для каждого rowNum добавляет массив в этот массив. Для каждой ячейки в выходной таблице значение добавляется к массиву строк с push. Если copyHead истинно, он добавляет ячейки в thead. Для каждого rowNum значения в этом подмассиве join помечаются знаком \t, чтобы добавить табуляцию между каждой ячейкой. Затем к rows join добавляется \n, чтобы поместить их каждую в новую строку.

$temp добавляется к $tableDiv, а затем фокус перемещается на этот элемент, он выбирается, а затем копируется. Поскольку фокус смещен на $temp, его следует добавить к той части страницы, которая находится рядом с кнопкой Copy Data, чтобы избежать перемещения страницы для пользователя. $temp окончательно удален из документа.