如何将HTML UI中的多个输入添加到Google电子表格中？
Cam*_*ron 8 html javascript google-sheets google-apps-script
我有一个电子表格,其中包含一个链接到我的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脚本文档.
Mog*_*dad 12
一旦页面加载,您的脚本当前正在调用没有参数的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,但是addItem在你的JavaScript中 - 从来没有用过.)
你的openInputDialog()功能是奇怪的; 它有一个不必要return的东西,可以阻止对话框显示,可能是从一些调试尝试中遗留下来的.
当itemAdd()调用runner函数时,应该传递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>
- 乐意效劳!我们所要求的只是赞成并接受......我们这样奇怪.欢迎来到SO! (3认同)
| 归档时间： |
|
| 查看次数： |
4387 次 |
| 最近记录： |