Оптимизация кода для помещения значений «по умолчанию», взятых из электронной таблицы, в поля формы HTML
Я поместил форму на боковую панель Google Таблиц с помощью HTML. Форма загружается быстро, когда я выбираю ее из своего пользовательского меню. Эта форма используется один раз в начале дня одним пользователем. Однако бывают случаи, когда кто-то допускает ошибку в форме и решает обновить ее позже в тот же день. Для таких случаев я создал идентичную форму, которая извлекает последнее значение из электронной таблицы в каждом столбце, соответствующем полю формы. Форма откроется со значениями, уже отображенными в поле формы. Таким образом, редактор сможет видеть последние введенные данные и просто исправлять любые числа, требующие исправления.
В моей форме есть около 30 полей, которые предварительно заполняются. Проблема в том, что когда пользователь выбирает «Обновить форму», для получения значений формы и ее отображения со значениями в полях может потребоваться до 30 секунд. Есть ли способ оптимизировать этот скрипт, чтобы значения захватывались все сразу и передавались в нужное поле формы.
Вот образец моего скрипта Google Apps:
function todayLValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var lValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),2).getValues();
return lValue;
}
function todayFTValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var fTValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),3).getValue();
return fTValue;
}
function todayBSValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var bSValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),4).getValue();
return bSValue;
}
function todaySPValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var sPValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),5).getValue();
return sPValue;
}
function todayCMValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var cMValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),6).getValue();
return cMValue;
}
function todayITValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var iTValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),7).getValue();
return iTValue;
}
function todayStdTValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var stdTValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),8).getValue();
return stdTValue;
}
function todaySCValue(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var sCValue = scheduleSheet.getRange(scheduleSheet.getLastRow(),9).getValue();
return sCValue;
}
А вот образец моего HTML-файла:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<link
rel = "stylesheet"
href = "https://ssl.gstatic.com/docs/script/css/add-ons1.css"
/>
<style>
.container {
margin: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class = "container">
<form id = "inputForm " onkeydown = "return event.key != 'Enter'"/>
<h1 style = "color:#cc0000;text-align:center;font-weight:bold;">Scheduled for Today</h1>
<label for = "L_Scheduled">Label1</label>
<input type = "text" name = "L_Scheduled" id = "L_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayLValue()?> />
<br />
<br />
<label for = "F_T_Scheduled">Label2</label>
<input type = "text" name = "F_T_Scheduled" id = "F_T_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayFTValue()?> />
<br />
<br />
<label for = "B_S_Scheduled">Label3</label>
<input type = "text" name = "B_S_Scheduled" id = "B_S_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayBSValue()?> />
<br />
<br />
<label for = "S_P_Scheduled">Label4</label>
<input type = "text" name = "S_P_Scheduled" id = "S_P_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todaySPValue()?> />
<br />
<br />
<label for = "C_M_Scheduled">Label5</label>
<input type = "text" name = "C_M_Scheduled" id = "C_M_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayCMValue()?> />
<br />
<br />
<label for = "I_T_Scheduled">Label6</label>
<input type = "text" name = "I_T_Scheduled" id = "I_T_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayITValue()?> />
<br />
<br />
<label for = "STD_T_Scheduled">Label7</label>
<input type = "text" name = "STD_T_Scheduled" id = "STD_T_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todayStdTValue()?> />
<br />
<br />
<label for = "S_C_Scheduled">Label8</label>
<input type = "text" name = "S_C_Scheduled" id = "S_C_Scheduled" style = "width: 50px; text-align: center; float: right" value=<?=todaySCValue()?> />
<br />
<br />
В моем скрипте приложений я использую getValue() для каждой ячейки, для которой хочу получить значение. (Я предполагаю, что каждый раз при использовании этой функции выполняется отдельный вызов.) Затем в моем HTML-файле я возвращаю желаемое значение, присваивая каждому полю соответствующее значение, вызванное в скрипте.
Я не знаю, как сделать один вызов getValues() и затем ввести правильное значение в правильное поле формы.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
68
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Я получал все это одновременно и отображал на боковой панели.
function todayValues() {
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName("Sheet0");
const vs = sh.getRange(sh.getLastRow(),2,1,8).getValues().flat();//get data all at one time
const ids = [...Array.from(new Array(8).keys(),k => `id${k}`)]
let html = '<!DOCTYPE html><html><head><base target = "_top"></head><body><form>';
vs.forEach((e,i) => {
html += `<br><input type = "text" id = "${ids[i]}" value = "${e}">`;
});
html += "</form></body></html>";
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html));
Logger.log(html)
}
Execution log
2:46:15 PM Notice Execution started
2:46:17 PM Info <!DOCTYPE html><html><head><base target = "_top"></head><body><form><br><input type = "text" id = "id0" value = "0"><br><input type = "text" id = "id1" value = "9"><br><input type = "text" id = "id2" value = "1"><br><input type = "text" id = "id3" value = "7"><br><input type = "text" id = "id4" value = "19"><br><input type = "text" id = "id5" value = "14"><br><input type = "text" id = "id6" value = "23"><br><input type = "text" id = "id7" value = "3"></form></body></html>
2:46:18 PM Notice Execution completed
Ответ принят как подходящий
ПРЕДПОЛОЖЕНИЕ:
То же самое и со стратегией Купера по получению всех значений одновременно, но он попытался сделать это с меньшими изменениями исходного кода.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<link
rel = "stylesheet"
href = "https://ssl.gstatic.com/docs/script/css/add-ons1.css"
/>
<style>
.container {
margin: 5px 5px 5px 5px;
}
input {
width: 50px;
text-align: center;
float: right;
}
</style>
</head>
<body>
<div class = "container">
<form id = "inputForm " onkeydown = "return event.key != 'Enter'"/>
<h1 style = "color:#cc0000;text-align:center;font-weight:bold;">Scheduled for Today</h1>
<label for = "L_Scheduled">Label1</label>
<input type = "text" name = "L_Scheduled" id = "L_Scheduled" value = " " />
<br/>
<br/>
<label for = "F_T_Scheduled">Label2</label>
<input type = "text" name = "F_T_Scheduled" id = "F_T_Scheduled" value = " " />
<br/>
<br/>
<label for = "B_S_Scheduled">Label3</label>
<input type = "text" name = "B_S_Scheduled" id = "B_S_Scheduled" value = " " />
<br/>
<br/>
<label for = "S_P_Scheduled">Label4</label>
<input type = "text" name = "S_P_Scheduled" id = "S_P_Scheduled" value = " " />
<br/>
<br/>
<label for = "C_M_Scheduled">Label5</label>
<input type = "text" name = "C_M_Scheduled" id = "C_M_Scheduled" value = " " />
<br/>
<br/>
<label for = "I_T_Scheduled">Label6</label>
<input type = "text" name = "I_T_Scheduled" id = "I_T_Scheduled" value = " " />
<br/>
<br/>
<label for = "STD_T_Scheduled">Label7</label>
<input type = "text" name = "STD_T_Scheduled" id = "STD_T_Scheduled" value = " " />
<br/>
<br/>
<label for = "S_C_Scheduled">Label8</label>
<input type = "text" name = "S_C_Scheduled" id = "S_C_Scheduled" value = " " />
<br/>
<br/>
</div>
<script>
function allValues(val){
var label1 = document.getElementById("L_Scheduled");
var label2 = document.getElementById("F_T_Scheduled");
var label3 = document.getElementById("B_S_Scheduled");
var label4 = document.getElementById("S_P_Scheduled");
var label5 = document.getElementById("C_M_Scheduled");
var label6 = document.getElementById("I_T_Scheduled");
var label7 = document.getElementById("STD_T_Scheduled");
var label8 = document.getElementById("S_C_Scheduled");
label1.value = val[0][0];
label2.value = val[0][1];
label3.value = val[0][2];
label4.value = val[0][3];
label5.value = val[0][4];
label6.value = val[0][5];
label7.value = val[0][6];
label8.value = val[0][7];
}
google.script.run.withSuccessHandler(allValues).getAllValues();
</script>
</body>
</html>
Код.gs
function getAllValues(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var scheduleSheet = ss.getSheetByName("Scheduled");
var values = scheduleSheet.getRange(scheduleSheet.getLastRow(),1,1,8).getValues();
console.info(values);
return values;
}
function onOpen() {
SpreadsheetApp.getUi().createMenu('Options').addItem('Display Form', 'callForm').addToUi()
}
//used to serve the HTML on the sidebar
function callForm() {
var htmlServe = HtmlService.createHtmlOutputFromFile("Untitled");
SpreadsheetApp.getUi().showSidebar(htmlServe);
}
ВЫХОД:
Ух ты! Спасибо. Какая разница – 3 или 4 секунды вместо 30 секунд.
—
23.02.2024 12:08
Я не был уверен, как сопоставить значения в электронной таблице со входными данными формы. Теперь я понимаю.
—
23.02.2024 12:18
Другие вопросы по теме
Добавьте значение регистра в новое поле ввода
Как проверить объект Zod в зависимости от значения родительского объекта
Как правильно обрабатывать сочетания клавиш в форме с несколькими элементами управления вводом?
Массив PHP $_FILES остается пустым после загрузки файла
Нужен флажок с крестиком
Ага, проверка с помощью формы реагирования, несмотря на действительные поля (NextJS)
CSV-файл не передается при отправке html-формы с помощью метода POST (в контексте использования Django)
Шаблон ввода HTML допускает пробелы после этого
Shadcn Input + Form + Zod «Компонент меняет неконтролируемый ввод на управляемый»
Как передать входные значения формы из дочернего компонента в родительский компонент в REACT?
Похожие вопросы
Ползунок диапазона ввода с конкретным номером
Как я могу написать свой CSS-код, соответствующий данному дизайну?
Преобразование сущностей HTML в функцию onchange в php
Как я могу расположить элементы в электронном письме в формате HTML в Outlook
Есть ли случай, когда z-индекс можно полностью переопределить в файле?
Как уменьшить ширину одного div в сеточной системе в Bootstrap
Как переместить навигационное меню в правую часть страницы?
Как я могу очистить таблицу с сайта в вопросе
Дочерний элемент Flexbox не имеет объявленного заполнения
Проблема с угловым слайдером
Было бы хорошо, если бы вы могли включить весь HTML-код в тег сценария?