Блог

Главная - Вопросы по программированию - Как отформатировать немодальный диалог

Как отформатировать немодальный диалог

#google-apps-script

#google-приложения-скрипт

Вопрос:

У меня есть немодальное диалоговое окно, в котором отображается содержимое ряда ячеек. Однако все данные выполняются вместе, celldata, celldata, celldata, celldata.

Я нашел очень мало информации о форматировании немодального диалога, и те примеры, которые я нашел, содержат только некоторый текст или вопрос «да / нет» для ответа. Форматирование ширины / высоты достаточно простое, но не делает того, что мне нужно.

Я ничего не нахожу о том, как отформатировать это так, чтобы оно располагалось ВЕРТИКАЛЬНО следующим образом: celldata
celldata
celldata
celldata

Кто-нибудь может предложить push?

Комментарии:

1. Создайте HTML-строку из этих данных. Скорее всего, ваши данные находятся в массиве, поэтому используйте стандартный JavaScript для доступа к его элементам и форматируйте их по своему усмотрению

2. Это будет базовый css / html. Добавьте перенос строки </br> или создайте таблицу с тегами <table> , <tr> и <td> .

3. Вы можете создать HTML-код на сервере в файле GS или создать HTML-код на стороне клиента в браузере. Это можно сделать несколькими способами.

Ответ №1:

Вот пример создания пользовательского диалогового окна и размещения значений строки по вертикали. В этом случае 1-я строка электронной таблицы является именем для значений столбца. Этот пример демонстрирует использование 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>