Вопрос или проблема
У меня есть эта вкладка с таблицей, в которой содержатся несколько данных с колонок A – Q. Есть только 5 колонок, которые можно редактировать. Я использовал data-table для извлечения данных из таблицы на веб-страницу. Все данные отображаются корректно, но мне нужно, чтобы можно было редактировать таблицу из HTML, и это также изменяло данные в таблице в реальном времени. Так, если я редактирую строку в колонке A на веб-странице, данные в таблице также изменятся. Я не знаю, возможно ли это. Мне также нужен какой-то код, чтобы обновлять страницу каждые 2 секунды, чтобы получать последние обновления из таблицы в data-table.
Вот мой код на code.gs:
function getDataTable() {
var spreadSheetId = "ID таблицы"; //ИЗМЕНИТЕ
var dataRange = "SampleRange!A3:Q"; //ИЗМЕНИТЕ
var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
var values = range.values;
return values;
}
А вот код моего html.
<html>
<head>
<base target="_top">
<!--ВКЛЮЧИТЕ НЕОБХОДИМЫЕ ВНЕШНИЕ БИБЛИОТЕКИ JAVASCRIPT И CSS-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.colVis.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
</table>
</div>
</div>
</body>
</html>
<script>
google.script.run.withSuccessHandler(showData).getDataTable();
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"Дата"}, <-- это нужно сделать редактируемым
{"title":"Имя"}, <-- это нужно сделать редактируемым
{"title":"Номер дела"},
{"title":"Имя аккаунта"},
{"title":"Страна"},
{"title":"Статус"},
{"title":"Причина обращения"},
{"title":"Дата и время открытия"},
{"title":"Дата последнего изменения"},
{"title":"Статус бронирования"},
{"title":"Дата нарушения"},
{"title":"Оставшиеся часы"},
{"title":"Статус дел"},
{"title":"Статус"}, <-- это нужно сделать редактируемым
{"title":"Время входа"}, <-- это нужно сделать редактируемым
{"title":"Время выхода"} <-- это нужно сделать редактируемым
],
});
});
}
function copyToClipboard(id) {
var from = document.getElementById(id);
var range = document.createRange();
window.getSelection().removeAllRanges();
range.selectNode(from);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
</script>
.
Ответ или решение
Для реализации функции редактирования таблицы с данными из Google Sheets в HTML с использованием Google Apps Script, необходимо следовать нескольким шагам, чтобы обеспечить взаимодействие между веб-интерфейсом и таблицей. Ниже приведены детальные инструкции и соответствующий код, чтобы сделать это возможным.
Шаг 1: Обновление скрипта Google Apps Script
Для начала изменим код в code.gs, добавив функцию для обновления данных в таблице Google Sheets. Мы создадим новую функцию updateDataTable, которая будет принимать измененные данные из HTML-кода и записывать их обратно в таблицу.
function getDataTable() {
var spreadSheetId = "spreadsheet ID"; // Измените на свой ID таблицы
var dataRange = "SampleRange!A3:Q"; // Измените на ваш диапазон
var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
var values = range.values;
return values;
}
function updateDataTable(row, col, value) {
var spreadSheetId = "spreadsheet ID"; // Измените на свой ID таблицы
var range = 'SampleRange!' + String.fromCharCode(65 + col) + (row + 3); // Конвертация номера колонки и строки
var resource = {
values: [[value]]
};
Sheets.Spreadsheets.Values.update(resource, spreadSheetId, range, {
valueInputOption: 'RAW'
});
}Шаг 2: Изменение HTML и JavaScript
Теперь обновим HTML-код для того, чтобы сделать нужные колонки редактируемыми. Это можно сделать, используя editor в DataTables. Мы добавим возможность отправлять изменения обратно в скрипт Google Apps Script.
Обновленный код JavaScript может выглядеть так:
<script>
google.script.run.withSuccessHandler(showData).getDataTable();
function showData(dataArray) {
$(document).ready(function() {
var table = $('#data-table').DataTable({
data: dataArray,
columns: [
{ "title": "Date", "editable": true },
{ "title": "Name", "editable": true },
{ "title": "Case #" },
{ "title": "Account Name" },
{ "title": "Country" },
{ "title": "Status" },
{ "title": "Case Reason" },
{ "title": "Date Time Opened" },
{ "title": "Last Modified Date" },
{ "title": "Booking Status" },
{ "title": "Date Breaching" },
{ "title": "Remaining Hours Left" },
{ "title": "Cases Status" },
{ "title": "Status", "editable": true },
{ "title": "Time In", "editable": true },
{ "title": "Time Out", "editable": true }
],
rowId: 'id'
});
// Обработка редактирования
$('#data-table tbody').on('click', 'td', function() {
var cell = table.cell(this);
if (cell.index() && cell.data().editable !== undefined) {
var originalValue = cell.data();
var input = $('<input type="text"/>').val(originalValue);
$(this).empty().append(input);
input.on('blur', function() {
var newValue = $(this).val();
var rowIndex = cell.index().row;
var colIndex = cell.index().column;
// Обновление таблицы
cell.data(newValue).draw();
google.script.run.updateDataTable(rowIndex, colIndex, newValue);
$(this).parent().text(newValue);
});
input.focus();
}
});
// Обновление таблицы каждые 2 секунды
setInterval(function() {
google.script.run.withSuccessHandler(function(updatedData) {
table.clear().rows.add(updatedData).draw();
}).getDataTable();
}, 2000);
});
}
</script>Итог
Теперь, когда пользователь кликает по редактируемым ячейкам (т.е. по ячейкам, которые были помечены как editable), он может вводить новые значения. После завершения редактирования изменения автоматически отправляются в Google Sheets, что обеспечивает синхронизацию данных в реальном времени. Кроме того, страница обновляется каждые 2 секунды, чтобы отражать любые изменения, сделанные другими пользователями.
Эта реализация удовлетворит ваши требования по редактированию данных прямо с веб-страницы с использованием Google Sheets и Google Apps Script, обеспечивая при этом надежный интерфейс для взаимодействия с данными.