Question

我有一个无模式对话框，该对话框显示一行单元格的内容。但是，所有数据（单元数据，单元数据，单元数据，单元数据）都一起运行。

我发现有关格式化无模式对话框的信息很少，我发现的示例仅包含一些文本或需要回答的是/否。格式化宽度/高度很容易，但是不能满足我的需要。

我没有找到有关如何格式化的任何内容，因此无法像这样垂直放置： celldata
celldata
celldata
celldata

任何人都可以提供推送吗？

Answer 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>

如何格式化无模式对话框

1 个答案: