javascript - 如何将来自 HTML UI 的多个输入添加到 Google 电子表格？-6ren

javascript - 如何将来自 HTML UI 的多个输入添加到 Google 电子表格？

转载作者：太空狗更新时间：2023-10-29 13:42:35

我有一个电子表格，其中有一个按钮链接到我的 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']);
}

索引.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 脚本文档阅读。

最佳答案

页面加载后，您的脚本当前正在调用不带参数的 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)" />

当响应从运行器addItem()返回时，将调用成功处理程序。要关闭对话框，请使用 google.script.host.close。您还可以有一个故障处理程序；如果运行者抛出异常，它将被调用。

(注意:您的 gs 中有 itemAdd，但 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>