javascript - 从应用程序脚本中的电子表格更新下拉列表

Question

我正在尝试学习 Google 的 HTML Service UI 服务，并且正在努力弄清楚如何根据电子表格中的数据更新 UI 中的下拉列表。我从this Google Tutorial复制了以下代码，效果很好。但是，如果我想使用 和 来填充下拉列表并替换下面的

，它似乎不起作用。

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

Answer 1

以下 Apps 脚本项目文件使用电子表格数据填充 UI 中的下拉选择框。在主 Apps 脚本项目文件(默认名称为 Code.gs)中，包括:

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();  
}

您需要将 *SPREADSHEET_ID* 替换为包含要用于填充选择框的数据的电子表格的 ID。此示例将第一张工作表的 A2:A5 范围中的数据作为要使用的数据(在 getRange() 函数中定义)。

另请注意，此示例使用 NATIVE 沙箱模式，该模式比默认的 EMULATED 模式更宽容。

此示例还需要 Apps 脚本项目中的 HTML 文件(此处名为“DropDown.html”):

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

此 HTML 文件由一个列表和一个选择框组成，两者都具有默认内容。加载页面时，两者的内容都将替换为 getMenuListFromSheet() 函数提供的内容，该函数从电子表格中提取其返回值。

您可以创建绑定(bind)到电子表格容器的这些 Apps 脚本项目文件，然后将它们发布为 Web 应用程序。