html - HTML (Metro 4) 和 Google 表格，异步加载数据

Question

自 10 月以来，我一直在尝试将一组项目加载到一个选择中。我可以在模板中使用同步编码，但不能使用异步编码（解释）。我看过视频，一个接一个地阅读 stackoverflow问题，阅读google 文档，metro文档，但就是想不通。这是一个带有 .gs 文件后端和一个 .html 文件的谷歌应用脚本项目，该文件应该用于加载侧边栏。

我有这个 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
    <!-- Title -->
    <h2 style="text-align: center;">Add New Job</h2>

    <!-- Job Name -->
    <p style="text-align: center;"><span class='mif-chat-bubble-outline'></span> Job Name</p>
    <input type="text" data-role="input" data-prepend="Name: ">

    <!-- Creator Name -->
    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select" id="mySelectList">
    <optgroup label="Employees">
           <option value="" selected> Loading... </option>     
    </optgroup>
    </select>    

    <nl></nl>
    <p style="text-align: center;">
      <button class="button success cycle " id="confirmButton"><span class="mif-checkmark"></span></button>
    </p>
    
    <!-- Metro 4 -->
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script>
      $(function() {
        $('#txt1').val('');
        console.log("Running updateSelect");
        google.script.run
          .withSuccessHandler(updateSelect)
          .getEmployeeNames();
      });

      function updateSelect(vA)//array of value that go into the select
      {
        var select = document.getElementById("mySelectList");
        select.options.length = 0;
        for (var i=0; i<vA.length;i++){
          console.log("Creating items %s, %s", vA[i], vA[i]);
          select.options[i] = new Option(vA[i],vA[i]);
          console.log ("select.options[i] = %s, select.options = %s.", select.options[i], select.options);
        }
      }

      console.log("My Code Ran");
    </script>

  </body>
</html>

它在运行时提供此控制台反馈。

控制台反馈

我已经删除了我所有的 cookie 和缓存，禁用了所有插件等，但这并没有解决问题。

为什么选项不会从“正在加载...”更改为我输入的实际新值？作为参考，我有以下代码确实有效，但它以一种低效的方式（在模板本身内部，而不是被调用）。

<!-- Creator Name -->
    <? var employees = getEmployeeNames(); ?>

    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select"  id="jobCreator">
    <optgroup label="Employees">
     
        <? for (var i = 0; i < employees.length; i++){ ?>
           <option> <?= employees[i] ?></option>
        <? } ?>
      
    </optgroup>
    </select>

这是 getEmployeeNames() 的后端脚本。我试过它返回一个一维或二维数组。虽然该函数给出了预期的输出，但 HTML 选择仍然没有更新新选项。

function getEmployeeNames(){
  var employeeSheet = SpreadsheetApp.getActive().getSheetByName('Dropdown Lists');
  var names = employeeSheet.getRange(5, 4, employeeSheet.getLastRow(), 1).getValues();

  names = removeBlankEntries(names);

  Logger.log ('Employee Names "%s"', names);

  return names;  
}

function removeBlankEntries(arr){
  
  var output = [];
  arr.forEach(function(value){
    if (value != "" & value != " "){
      output.push(value[0]) // add [0] to make it 1d
    };
  });
  return output;
}

这是一个示例 Logger.log 输出。

上午 8:27:00 信息员工姓名“[下午，员工 2，员工 3，员工 4]”

或者将其设置为提供二维数组。

上午 8:28:00 信息员工姓名“[[PM]、[员工 2]、[员工 3]、[员工 4]]”

此外，这里是边栏在代码中的加载方式。

function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

任何指导都会有所帮助。我认为上面的视频是最好的，我复制了三四次都没有成功。我已经编码了十年——尽管这只是我的副业——而且我从来没有遇到过这么多月的问题。

==对不起，这正在成为一个怪物线程。以下是复制的确切步骤==

创建一个新的空白 Google 表格。
打开脚本编辑器并创建一个名为 addJob 的 HTML 文件（它会自动将 .html 添加到末尾）
在 HTML 文件中，从标题为“我有这个 HTML”的帖子的第一个片段中完全复制代码
在 code.gs 文件中，复制以下代码

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Manage Sheet')
      .addSubMenu (ui.createMenu('Jobs')
        .addItem('Add New Job', 'loadNewJobSidebar'))
        .addToUi();
}

function getEmployeeNames(){
  return ["Bob", "Jamie", "Ted"];
}


function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

从脚本编辑器运行 onOpen() 函数。允许它运行。
返回电子表格，在自定义菜单上，选择“管理工作表 -> 工作 -> 添加新工作”
侧边栏将加载并说“正在加载”，但不会使用 getEmployee() 函数中的名称。
按 F12 并注意应加载显示选择选项的控制台日志语句。

score 0 · Accepted Answer

从您更新的问题中，我可以理解您当前的问题。在您的脚本的情况下，如何修改函数updateSelect如下？

修改后的脚本：

function updateSelect(vA) {
  var select = Metro.getPlugin("#mySelectList", 'select');
  select.data(Object.fromEntries(vA.map(e => [e, e])));
}

在本次修改中，假设的值为vA一维数组。请注意这一点。

参考：

选择 METRO_4

html - HTML (Metro 4) 和 Google 表格，异步加载数据

1 回答 1

修改后的脚本：

参考：

Related

Reference