Question

我有一个电子表格，其中包含一个链接到我的Google Apps脚本中openInputDialog功能的按钮。我希望的结果是按下按钮打开一个HTML UI，用户可以在其中输入文本到五个字段，文本从该输入中获取并附加到电子表格底部的新行。我遇到了一个问题，当点击submit按钮时没有任何反应;对话框没有关闭，更重要的是，没有一个新行附加了输入的值。

代码如下：

addItem.gs：

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
  return HtmlService.createHtmlOutputFromFile('Index')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
  .showModalDialog(html, 'Add Item');
}

function itemAdd() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  sheet.appendRow(["  ", 'category', 'item', 'manupub', 'details', 'quantity']);
}

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
    <input type="submit" value="Add Item">   
    </form>
    <script>
     google.script.run.addItem();
    </script>
</html>

我很确定我的问题的答案在于一些简单的问题或滥用此脚本的某些部分，但我的编程知识目前还不足以正确理解我和＃的Google Apps脚本文档39;一直在读。

Answer 1

当页面加载时，您的脚本当前正在调用没有参数的addItem：

<script>
 google.script.run.addItem();
</script>

相反，您需要在单击“提交”按钮时调用此函数。虽然我们在Google Apps脚本中使用HTML表单，但我们无法使用正常的提交操作;相反，我们设置了一个输入按钮，并使用单击处理程序来收集表单内容并将其传输到服务器功能。

您的提交按钮可能是这样的：

  <input type="button" value="Submit"
    onclick="google.script.run
        .withSuccessHandler(google.script.host.close)
        .addItem(this.parentNode)" />

当来自跑步者return的回复为addItem()时，将调用成功处理程序。要关闭对话框，请使用google.script.host.close。你也可以有一个失败处理程序;如果跑步者抛出异常，就会被调用。

（注意：您的itemAdd中有gs，但JavaScript中有addItem - 这些内容永远不会有效。）

你的openInputDialog()函数是奇数;它中有一个不必要的return，它会阻止对话框显示，可能会在一些调试尝试中遗留下来。

当调用转轮函数itemAdd()时，应该传递HTML表单的内容。由于提交按钮是该表单的一部分，因此表单的字段在DOM中显示为其父节点的属性;所以点击处理程序将this.parentNode作为参数传递给跑步者。

在服务器端，itemAdd()接收form对象，因此我们需要一个参数来促进对它的操作。然后引用命名的表单字段，如下所示：

sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);

无论如何，这现在有效：

addItem.gs

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Add Item');
}

function itemAdd(form) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);
  return true;
}

的index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
     <input type="button" value="Submit"
        onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .itemAdd(this.parentNode)" />
    </form>
</html>

如何将HTML UI中的多个输入添加到Google电子表格中？

1 个答案:

addItem.gs

的index.html