Вот пример создания пользовательского диалога и размещения значений строки по вертикали.В этом случае первая строка таблицы представляет собой имя для значений столбца.В этом примере демонстрируется использование HTMLTemplate и google.script.run для запроса данных из электронной таблицы.Существует 4 файла: Code.gs, HTML_Table.html, JS_Table.html и CSS_Table.html.
Code.gs
function test() {
try {
var html = HtmlService.createTemplateFromFile("HTML_Table").evaluate();
SpreadsheetApp.getUi().showModelessDialog(html, "Table");
}
catch(err) {
Logger.log(err);
}
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function initTable() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var table = {};
table.rowCount = sheet.getLastRow()-1;
table.values = sheet.getRange(1,1,2,sheet.getLastColumn()).getValues(); // 2 rows
return JSON.stringify(table);
}
function getRow(i) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var row = {};
row.values = sheet.getRange(i,1,1,sheet.getLastColumn()).getValues()[0]; // only 1 row
return JSON.stringify(row);
}
HTML_Table.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS_Table'); ?>
</head>
<body>
<select id="selectRow" onchange="getRow()">
</select>
<div id="tableRows">
</div>
<?!= include('JS_Table'); ?>
</body>
</html>
CSS_Table.html
<style>
td { border-style: solid }
</style>
JS_Table.html
<script>
(function () {
google.script.run.withSuccessHandler(
function (value) {
var rows = JSON.parse(value);
var select = document.getElementById("selectRow");
for( var i=1; i<=rows.rowCount; i++ ) {
var option = document.createElement("option");
option.text = i;
select.add(option);
}
var div = document.getElementById("tableRows");
var table = document.createElement("table");
table.setAttribute("id","tableCells");
for( var i=0; i<rows.values[0].length; i++ ) {
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(rows.values[0][i]));
row.appendChild(cell);
cell = document.createElement("td");
cell.appendChild(document.createTextNode(rows.values[1][i]));
row.appendChild(cell);
table.appendChild(row);
}
div.appendChild(table);
}
).initTable();
}());
function getRow() {
var row = document.getElementById("selectRow").selectedIndex+1;
google.script.run.withSuccessHandler(
function (value) {
var row = JSON.parse(value);
var table = document.getElementById("tableCells");
for( var i=0; i<table.rows.length; i++ ) {
table.rows[i].cells.item(1).innerHTML = row.values[i];
}
}
)
.getRow(row);
}
</script>