Javascript 如何从google脚本向html页面传递值_Javascript_Html_Google Apps Script

Javascript 如何从google脚本向html页面传递值

javascript html google-apps-script

Javascript 如何从google脚本向html页面传递值,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,我有一个谷歌工作表，维护着一个项目列表，后面还有一些脚本。我已经能够添加功能，单击添加项目按钮，打开一个HTML窗口输入信息，并在提交时向工作表添加一条新记录现在，我正在进行一个过程，如果状态更改为取消，则删除记录。我想做的是显示一个html窗口，列出项目的某些细节，并让用户有机会返回而不取消项目，或者输入一些注释说明取消项目的原因，然后继续我陷入困境的地方是用项目的细节填充html窗口。我已经想出了一个办法，但我知道这不是最好的办法谷歌脚本： function onEdit(e) {

我有一个谷歌工作表，维护着一个项目列表，后面还有一些脚本。我已经能够添加功能，单击添加项目按钮，打开一个HTML窗口输入信息，并在提交时向工作表添加一条新记录

现在，我正在进行一个过程，如果状态更改为取消，则删除记录。我想做的是显示一个html窗口，列出项目的某些细节，并让用户有机会返回而不取消项目，或者输入一些注释说明取消项目的原因，然后继续

我陷入困境的地方是用项目的细节填充html窗口。我已经想出了一个办法，但我知道这不是最好的办法

谷歌脚本：

function onEdit(e) {
  if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") {
    var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName());
    var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn());
    var cancelRow = cancelRange.getValues();

    openCancelDialog(cancelRow);
  }
}

function openCancelDialog(x) {
  var html = HtmlService
  //.createHtmlOutputFromFile('Cancel')
  .createHtmlOutput(
    '<table><tr><td colspan = \"2\"><b>You are cancelling the following project:</b></td></tr>' +
    '<tr><td>Project Name: </td><td>' + x[0][4] + '</td></tr>' + 
    '<tr><td>Project Number: </td><td>' + x[0][0] + '</td></tr>' + 
    '<tr><td>Project Category: </td><td>' + x[0][1] + '</td></tr>' + 
    '<tr><td>Business Owner: </td><td>' + x[0][17] + '</td></tr>' + 
    '<tr><td>Project Manager: </td><td>' + x[0][18] + '</td></tr>' + 
    '</table>'
  )
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Cancel a Project');
}

这将是Cancel.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>

    <script>
      <!-- Scripting to get my values? -->
    </script>

  </head>
  <body>
    <!-- Layout the window
         Add a Comments section
         Add a button to go back without cancel
         Add a button to submit the cancel and update -->
  </body>
</html>

但是我还没有弄清楚的是如何将数组从openCancelDialog函数传递到html，这样它就可以显示在页面上了

我怀疑我需要向Cancel.html文件添加脚本来获取这些值。但是，有没有一种方法可以在创建该数组时将其发送到html？

使用：

Cancel.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
    var row = <?!=data.row?>;
    //document.write(row);
    </script>
  </body>
</html>


var行=；
//文件。写入（行）；

详细的模板文档：

使用：

Cancel.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
    var row = <?!=data.row?>;
    //document.write(row);
    </script>
  </body>
</html>


var行=；
//文件。写入（行）；

详细的模板文档：

这里有另一种方法。我喜欢这样做，因为我比模板有更多的控制

这是我在编写电子表格中包含的电子邮件示例脚本时编写的脚本。这个脚本稍微简单一点，因为它只是让用户可以选择从emailsetup页面删除已发送的电子邮件并将其归档到另一个页面。它通过动态创建html并将其收集为字符串，然后将其添加到另一个html页面来实现。我在脚本末尾启动html作为一个对话框，允许用户通过选中复选框并单击名为archive Selected的按钮来选择要归档的电子邮件。我发现将javascript函数放在一个标准html文件中，然后先通过HtmlService运行，然后再附加字符串更容易

以下是脚本：

function archiveSelectedEmails()
{
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sht=ss.getSheetByName('EmailSetup');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var s='<html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body>';
  var s='';
  for(var i=2;i<rngA.length;i++)
  {
    var dataA={};
    for(var j=0;j<rngA[1].length;j++)
    {
      dataA[rngA[1][j]]=rngA[i][j];
    }
    var row=Number(i+1);
    s+='<div id="row' + row + '"><input type="checkbox" name="email" value="' + Number(i+1) + '" />' + ' <strong>Row:</strong> ' + Number(i+1) + ' <strong>Name:</strong> ' + dataA.Name + ' <strong>Email:</strong> ' + dataA.Email + ' <strong>Subject:</strong> ' + dataA.Subject + ' <strong>DateSent:</strong> ' + Utilities.formatDate(new Date(dataA.DateSent), 'GMT-6', "M/dd/yyyy HH:mm:ss") + '</div>';
  }
  s+='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><input type="button" value="Archive Checked" onClick="getCheckedBoxes(\'email\');" />';

  var html=HtmlService.createHtmlOutputFromFile('htmlToBody').setWidth(800).setHeight(250);
  html.append(s);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Select Emails to Archive');
}

函数archiveSelectedEmails（）
{
var ss=SpreadsheetApp.getActiveSpreadsheet（）；
var sht=ss.getSheetByName（'EmailSetup'）；
var rng=sht.getDataRange（）；
var rngA=rng.getValues（）；
var s=''；
var s=''；
对于（var i=2；i这里有另一种方法。我喜欢这样做，因为我比使用模板有更多的控制
这是我在处理电子表格中包含的电子邮件示例脚本时编写的一个脚本。该脚本稍微简单一点，因为它只是让用户可以选择从emailsetup页面删除已发送的电子邮件并将其归档到另一个页面。它通过动态创建html并将其收集为一个字符串，然后将其添加到另一个html页面。我在脚本末尾启动html作为一个对话框，允许用户通过选中复选框并单击名为archive Selected的按钮来选择要存档的电子邮件。我发现将我的javascript函数放在一个标准html文件中，然后通过Htm运行更容易首先是lService，然后追加字符串
以下是脚本：
function archiveSelectedEmails()
{
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sht=ss.getSheetByName('EmailSetup');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var s='<html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body>';
  var s='';
  for(var i=2;i<rngA.length;i++)
  {
    var dataA={};
    for(var j=0;j<rngA[1].length;j++)
    {
      dataA[rngA[1][j]]=rngA[i][j];
    }
    var row=Number(i+1);
    s+='<div id="row' + row + '"><input type="checkbox" name="email" value="' + Number(i+1) + '" />' + ' <strong>Row:</strong> ' + Number(i+1) + ' <strong>Name:</strong> ' + dataA.Name + ' <strong>Email:</strong> ' + dataA.Email + ' <strong>Subject:</strong> ' + dataA.Subject + ' <strong>DateSent:</strong> ' + Utilities.formatDate(new Date(dataA.DateSent), 'GMT-6', "M/dd/yyyy HH:mm:ss") + '</div>';
  }
  s+='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><input type="button" value="Archive Checked" onClick="getCheckedBoxes(\'email\');" />';

  var html=HtmlService.createHtmlOutputFromFile('htmlToBody').setWidth(800).setHeight(250);
  html.append(s);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Select Emails to Archive');
}

函数archiveSelectedEmails（）
{
var ss=SpreadsheetApp.getActiveSpreadsheet（）；
var sht=ss.getSheetByName（'EmailSetup'）；
var rng=sht.getDataRange（）；
var rngA=rng.getValues（）；
var s=''；
var s=''；
对于（var i=2；iKos的回答给了我一些关于如何计算的想法。这以及一些额外的阅读，特别是后续章节，帮助我解决了这个问题
新js代码：
function onEdit(e) {
  if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") {
    var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName());
    var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn());
    var cancelRow = cancelRange.getValues();

    //openCancelDialog(cancelRow);

    var aSheet = e.source.getActiveSheet().getName();
    var column = e.range.getColumn();
    var row = e.range.getRow();
    Logger.log("Col: " + column + "  Row: " + row + "  Sheet: " + aSheet);
    Logger.log(cancelRow);
  }
  Logger.log(e);
}

function openCancelDialog(row) {
  var ui = SpreadsheetApp.getUi();

  // get template
  var template = HtmlService.createTemplateFromFile('Cancel');

  var myJSON = JSON.stringify(row);

  // pass data to template
  template.data = myJSON;

  // get output html
  var html = template.evaluate();

  // show modal window
  ui.showModalDialog(html, 'Cancel a Project');
}

新HTML：
<!DOCTYPE html>
<html>
  <body>  
    <table>
      <tr><td>Number: </td><td id="number"></td></tr>
      <tr><td>Name: </td><td id="name"></td></tr>
      <tr><td>Category: </td><td id="category"></td></tr>
      <tr><td>Business Owner: </td><td id="owner"></td></tr>
      <tr><td>Project : </td><td id="manager"></td></tr>
    </table>

    <script>
      var objII = JSON.parse(<?=data?>);

      document.getElementById("number").innerHTML = objII[0][0];
      document.getElementById("name").innerHTML = objII[0][4];
      document.getElementById("category").innerHTML = objII[0][1];
      document.getElementById("owner").innerHTML = objII[0][17];
      document.getElementById("manager").innerHTML = objII[0][18];
    </script>

  </body>
</html>


编号：
姓名：
类别：
企业主：
项目：
var objII=JSON.parse（）；
document.getElementById（“number”）.innerHTML=objII[0][0]；
document.getElementById（“name”）.innerHTML=objII[0][4]；
document.getElementById（“category”）.innerHTML=objII[0][1]；
document.getElementById（“所有者”）.innerHTML=objII[0][17]；
document.getElementById（“manager”）.innerHTML=objII[0][18]；

我怀疑可能有更优雅的方式来做这件事，甚至可能有更“正确”的方式。但这似乎是我需要它做的工作，所以我想我会发布它，以防其他人看到
谢谢你
科斯的回答给了我一些关于如何解决这个问题的想法。这以及一些额外的阅读，特别是后续章节，帮助我解决了这个问题
新js代码：
function onEdit(e) {
  if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") {
    var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName());
    var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn());
    var cancelRow = cancelRange.getValues();

    //openCancelDialog(cancelRow);

    var aSheet = e.source.getActiveSheet().getName();
    var column = e.range.getColumn();
    var row = e.range.getRow();
    Logger.log("Col: " + column + "  Row: " + row + "  Sheet: " + aSheet);
    Logger.log(cancelRow);
  }
  Logger.log(e);
}

function openCancelDialog(row) {
  var ui = SpreadsheetApp.getUi();

  // get template
  var template = HtmlService.createTemplateFromFile('Cancel');

  var myJSON = JSON.stringify(row);

  // pass data to template
  template.data = myJSON;

  // get output html
  var html = template.evaluate();

  // show modal window
  ui.showModalDialog(html, 'Cancel a Project');
}

新HTML：
<!DOCTYPE html>
<html>
  <body>  
    <table>
      <tr><td>Number: </td><td id="number"></td></tr>
      <tr><td>Name: </td><td id="name"></td></tr>
      <tr><td>Category: </td><td id="category"></td></tr>
      <tr><td>Business Owner: </td><td id="owner"></td></tr>
      <tr><td>Project : </td><td id="manager"></td></tr>
    </table>

    <script>
      var objII = JSON.parse(<?=data?>);

      document.getElementById("number").innerHTML = objII[0][0];
      document.getElementById("name").innerHTML = objII[0][4];
      document.getElementById("category").innerHTML = objII[0][1];
      document.getElementById("owner").innerHTML = objII[0][17];
      document.getElementById("manager").innerHTML = objII[0][18];
    </script>

  </body>
</html>


编号：
姓名：
类别：
企业主：
项目：
var objII=JSON.parse（）；
document.getElementById（“number”）.innerHTML=objII[0][0]；
document.getElementById（“name”）.innerHTML=objII[0][4]；
document.getElementById（“category”）.innerHTML=objII[0][1]；
document.getElementById（“所有者”）.innerHTML=objII[0][17]；
document.getElementById（“manager”）.innerHTML=objII[0][18]；

我怀疑可能有更优雅的方式来做这件事，甚至可能有更“正确”的方式。但这似乎是我需要它做的工作，所以我想我会发布它，以防其他人看到
多谢各位
<!DOCTYPE html>
<html>
  <body>  
    <table>
      <tr><td>Number: </td><td id="number"></td></tr>
      <tr><td>Name: </td><td id="name"></td></tr>
      <tr><td>Category: </td><td id="category"></td></tr>
      <tr><td>Business Owner: </td><td id="owner"></td></tr>
      <tr><td>Project : </td><td id="manager"></td></tr>
    </table>

    <script>
      var objII = JSON.parse(<?=data?>);

      document.getElementById("number").innerHTML = objII[0][0];
      document.getElementById("name").innerHTML = objII[0][4];
      document.getElementById("category").innerHTML = objII[0][1];
      document.getElementById("owner").innerHTML = objII[0][17];
      document.getElementById("manager").innerHTML = objII[0][18];
    </script>

  </body>
</html>