javascript - 如何在名为 HTML 的模板中创建 HTML 模板

问题描述

所以，我最近一直在尝试使用 de google apps 脚本。到目前为止一切顺利，但我遇到了一个让我失望的问题：我在电子表格中有一个按钮，它调用带有脚本中的函数的侧边栏菜单

宏.gs

function sbCases() {
   var Form = HtmlService.createTemplateFromFile("Cases");
   var ShowForm = Form.evaluate();

   ShowForm.setTitle("ASS-CAD - Cases manager system").setHeight(400).setWidth(1000);
   SpreadsheetApp.getUi().showSidebar(ShowForm);

我用这个函数调用的 html 文件工作得很好，但我想调用第二种形式，也可以通过 html 文件来管理电子表格数据。所以我已经将此函数添加到 .gs 文件中（并启动了一个新的 html 文件）：

function NovoCasoMSE(){
   var Form = HtmlService.createTemplateFromFile("NewCase");
   var ShowForm = Form.evaluate();

   ShowForm.setTitle("New Case").setHeight(400).setWidth(1000);
   SpreadsheetApp.getUi().showModalDialog(ShowForm, "New Case");
}

但是当我尝试从第一个 html 文件中的按钮调用它时，单击按钮没有任何反应（检查了日志并且按钮应该调用的函数没有被执行。按照代码（html 充满了东西，就像按钮和所有东西一样）（“btn”是处理 html 文件的按钮的 ID）：

<script>

document.getElementById("btn").addEventListener("click", NewCase);


function NewCase(){
   google.script.run.NewCase()
}

</script>

我在大学里学习 c，但在 javascript 或 google 脚本方面经验很少，所以我很确定我做错了什么。感谢您提前提供任何帮助。:)

标签： javascriptgoogle-apps-scriptgoogle-sheets

解决方案

你可以尝试这样的事情：

运行 showTSidebar 让事情滚动，然后单击按钮。

ag1.gs：

function loadForm() {
  var html='<form><input type="text" name="name1"/><input type="button" value="Click" onClick="process(this.parentNode);" /></form>';
  return html;
}

function showTSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('ah4').evaluate());
}

function processForm(obj) {
  SpreadsheetApp.getUi().alert('name1: ' + obj.name1);
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

ah4.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('sbresrc') ?>
  </head>
  <body>
   <div id="form"></div>
   <input type="button" value="Load Form" onClick="loadForm();" />
    <?!= include('ah6') ?>
  </body>
</html>

ah6.html：

<script>
  function loadForm() {
    google.script.run
    .withSuccessHandler(function(html){
      $('#form').html(html);
      $('#form').css('display','block');
    })
    .loadForm();
  }
  function process(obj) {
    google.script.run.processForm(obj);
  }
</script>

sbresrc.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

动画：

javascript - 如何在名为 HTML 的模板中创建 HTML 模板

问题描述

解决方案

推荐阅读