如何从 Google 表格的范围中填充 HTML 服务选择选项? [英] How to Populate HTML Service Select Options from Range in Google Sheet?

查看：14 发布时间：2021/12/15 22:36:56 google-apps-script

本文介绍了如何从 Google 表格的范围中填充 HTML 服务选择选项?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用我正在使用的 Google 表格中我的供应商数据库选项卡的 A 列中包含的所有条目填充我的 HTML 服务下拉/选择选项列表.但是，它当前在运行时显示为空白.有什么建议?

应用脚本:

 函数 getVendors() {var active = SpreadsheetApp.getActive();var sheet = active.getSheetByName("供应商数据库");var lastRow = sheet.getLastRow();var myRange = sheet.getRange("A2:A" + lastRow);var data = myRange.getValues();var optionsHTML += "";for (var i = 0; i < data.length;i+=1) {optionsHTML = '<选项>'+ 数据[i][0] + '</option>';};返回选项HTML；}

HTML:

<头><base target="_top"><身体><表格><div><选择><选项>!= google.script.run.getVendors();</选项></选择>

</表单>

解决方案

初始化 optionsHTML 时应该是直接赋值，而不是 +=.相反，在 for 循环中使用 += 否则您将替换 optionsHTML 的内容而不是附加到它.

function getVendors() {var active = SpreadsheetApp.getActive();var sheet = active.getSheetByName("供应商数据库");var lastRow = sheet.getLastRow();var myRange = sheet.getRange("A2:A" + lastRow);var data = myRange.getValues();var optionsHTML = "";for (var i = 0; i < data.length; i+=1) {optionsHTML += '<选项>'+ 数据[i][0] + '</option>';};返回选项HTML；}

确保您正确评估 HTML.由于您设置的方式，您需要将 HTML 文件(我假设它称为 Index.html)视为模板.

function doGet() {返回 HtmlService.createTemplateFromFile('Index').evaluate()}

最后，在 HTML 文件中，看起来您使用的是不完整的锚点.应该是然后直接调用函数.(另外，删除周围的标签，因为 getVendors() 已经提供了这些标签.)

<头><base target="_top"><身体><表格><div><选择><?!= getVendors();?></选择>

</表单>

完成这项工作后，如果有必要在此方面投入更多时间和精力，请重构以遵循最佳实践和异步加载数据，而不是在模板中使用@Cooper 提到的 HTML 中的客户端脚本.

I am trying to populate my HTML Service drop down/select option list with all entries included in column A of my Vendor Database tab in the Google Sheet I am working with. It is currently showing up blank, though, when running. Any suggestions?

APPS SCRIPT:

 function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML += "";
  for (var i = 0; i < data.length;i+=1) {
   optionsHTML = '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
 }

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
   <body>
 <form>
 <div>
   <select>
       <option> != google.script.run.getVendors(); </option>
      </select>
</div>
</form>
  </body>
</html>

解决方案

When initializing optionsHTML that should be direct assignment, not +=. Instead, use the += in the for loop as you'll otherwise be replacing the contents of optionsHTML rather than appending to it.

function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
}

Make sure you're correctly evaluating the HTML. Because of the way you've set this up, you need to treat your HTML file (I'm assuming it's called Index.html) as a template.

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
}

Finally, in the HTML file, looks like you're using incomplete anchors. Should be <?!= ... ?> and then call the function directly. (Also, remove the surrounding <option></option> tags as getVendors() already provides those.)

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form>
    <div>
      <select>
        <?!= getVendors(); ?>
      </select>
    </div>
  </form>
</body>
</html>

Once you have that working, and if it makes sense to put some more time and care into this, refactor to follow the best practices and load data asynchronously, not in templates by using a client-side script inside the HTML as mentioned by @Cooper.

这篇关于如何从 Google 表格的范围中填充 HTML 服务选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何从 Google 表格的范围中填充 HTML 服务选择选项? [英] How to Populate HTML Service Select Options from Range in Google Sheet?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何从 Google 表格的范围中填充 HTML 服务选择选项? [英] How to Populate HTML Service Select Options from Range in Google Sheet?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭