在应用脚本中更新电子表格中的下拉菜单 [英] update dropdown from spreadsheet in apps script
问题描述
我正在尝试学习Google的HTML服务UI服务，并且正在努力研究如何从电子表格中的数据更新UI中的下拉列表。我从此Google教程复制了以下代码，该代码正常工作。但是，如果我想使用和替换下面的
< p>事物列表：< / p>
< ul id =things>
< li>正在载入...< / li>
< / ul>
src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\">
< / script>
< script>
//该函数中的代码在页面加载时运行。
$（function（）{
google.script.run.withSuccessHandler（showThings）
.getLotsOfThings（）;
}）;
function showThings（things）{
var list = $（'＃things'）;
list.empty（）;
for（var i = 0; i< things.length; i ++）{
list.append（'< li>'+ things [i] +'< / li>'）;
}
}
< / script>
以下Apps脚本项目文件使用电子表格数据填充用户界面中的下拉选择框。在主要的Apps Script项目文件（默认名称是Code.gs）中，包括：
$ p $ 函数doGet（request）{
return HtmlService.createTemplateFromFile（'DropDown'）
.evaluate（）。setSandboxMode（HtmlService.SandboxMode.NATIVE）;
$ b $ function getMenuListFromSheet（）{
return SpreadsheetApp.openById（* SPREADSHEET_ID *）。getSheets（）[0]
.getRange（2 ，1,4,1）.getValues（）;
}
您需要将* SPREADSHEET_ID *替换为包含你想用来填充选择框的数据。此示例将第一个工作表的A2：A5范围中的数据作为要使用的数据（在getRange（）函数中定义）。
请注意，此示例使用NATIVE沙盒模式，这比默认的EMULATED模式更容易。
此示例还需要Apps脚本项目中的HTML文件（此处名为DropDown.html）：
< p>事物列表：< / p>
< ul id =things>
< li>正在载入...< / li>
< / ul>
< select id =menu>
< option>< / option>
< option> Google Chrome< / option>
< option> Firefox< / option>
< / select>
< script
src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\">
< / script>
< script>
//该函数中的代码在页面加载时运行。
$（function（）{
google.script.run.withSuccessHandler（showThings）
.getMenuListFromSheet（）;
google.script.run.withSuccessHandler（showMenu）
.getMenuListFromSheet（）;
}）;
function showThings（things）{
var list = $（'＃things'）;
list.empty（）;
for（var i = 0; i< things.length; i ++）{
list.append（'< li>'+ things [i] +'< / li>'）;
function showMenu（menuItems）{
var list = $（'＃menu'）;
list.find（'option'）。remove（）; //删除现有内容
for（var i = 0; i< menuItems.length; i ++）{
list.append（'< option>'+ menuItems [i] + '< /选项>'）;
}
}
< / script>
这个HTML文件由一个单一列表和一个选择框组成，这两个列表都有默认内容。加载页面时，两者的内容将被替换为由getMenuListFromSheet（）函数提供的内容，该函数从电子表格中绘制返回值。
您可以创建绑定到电子表格容器的这些Apps脚本项目文件，然后将其发布为Web应用程序。
I'm trying to learn Google's HTML Service UI service and am struggling to figure out how to update a dropdown list in a UI from data in a spreadsheet. I copied the following code from this Google Tutorial, which works fine. However, if I want to populate a dropdown using and to replace and
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
The following Apps Script project files use Spreadsheet data to fill a drop-down select box in the UI. In the main Apps Script project file (default name is Code.gs), include:
function doGet(request) {
return HtmlService.createTemplateFromFile('DropDown')
.evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function getMenuListFromSheet() {
return SpreadsheetApp.openById(*SPREADSHEET_ID*).getSheets()[0]
.getRange(2,1,4,1).getValues();
}
You will need to replace *SPREADSHEET_ID* with the ID of the spreadsheet containing the data you want to use to fill the select box. This example takes the data in the first sheet's A2:A5 range as the data to use (defined in the getRange() function).
Note also that this example uses NATIVE sandbox mode, which is more forgiving than the default EMULATED mode.
This example also needs an HTML file in the Apps Script project(named 'DropDown.html' here):
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<select id="menu">
<option></option>
<option>Google Chrome</option>
<option>Firefox</option>
</select>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getMenuListFromSheet();
google.script.run.withSuccessHandler(showMenu)
.getMenuListFromSheet();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
function showMenu(menuItems) {
var list = $('#menu');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems.length; i++) {
list.append('<option>' + menuItems[i] + '</option>');
}
}
</script>
This HTML file consists of a single list and a single select box, both with default contents. When the page is loaded, the contents of both will be replaced with the contents provided by the getMenuListFromSheet() function, which draws its returned value from the spreadsheet.
You can create these Apps Script project files bound to a Spreadsheet container, and then publish them as a web app.
这篇关于在应用脚本中更新电子表格中的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
