Google Script：从两列中提取数据并动态创建 div 类答案

【问题标题】：Google Script: Extract data from two columns and dynamically create div classesGoogle Script：从两列中提取数据并动态创建 div 类
【发布时间】：2018-05-22 23:06:44
【问题描述】：

我有一个包含两列的电子表格。您可以找到示例here。

我正在尝试在 Google Scripts 中编写一个脚本，该脚本允许我从第 1 列中提取所有值并将其放入特定的 button 标记中，并将第 2 列中的值放入带有 p 的单独类中标记。

如果有人要在 Google Scripts 中手写内容，这是我的代码：

<button class="accordion">Here is a question</button>
<div class="panel">
<p>Here is an answer</p>
</div> 

<button class="accordion">Here is another question</button>
<div class="panel">
<p>Here is another answer</p>
</div> 

<button class="accordion">Here is a final question</button>
<div class="panel">
<p>Here is a final answer</p>
</div>

我想创建一个脚本，该脚本将使用 JQuery 在 Google Scripts 中动态创建这种类似表的结构。

目前，这就是我对 GS 的看法：

在我的 Code.gs 文件中，我有这个：

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

在我的 Utils.gs 文件中，我有这个：

function test() {
  var n = "seperatertext";
  var this_file = SpreadsheetApp.getActive();
  var this_sheet = this_file.getSheets()[0];
  this_file.setActiveSheet(this_sheet); 
  /* var that needs to change from script to script */
  var target = SpreadsheetApp.openById('1F1bH0dzR5-UglxWtByS3ojePVEG2aW7qISOgNQ43fz8'); /* <<<< CHANGE THE ID >>>> */
  /* Give an indication to the use that the script is working*/
  var faqlist = this_file.getRange("A1:A").getValues();
  var faqnum = faqlist.filter(String).length;
  var n = [];
  for(var i = 2; i <= faqnum; i++) {
   first = "A".concat(i);
   second = "B".concat(i);
   n.push(this_file.getRange(first).getValue(),"seperatertext", this_file.getRange(second).getValue(),"seperatertext");
  }
  return n;
}

此函数是从另一个正确提取数据的工作表中复制的，但 HTML 结构不同，因此我不确定为什么它不适用于这种特殊情况。

【问题讨论】：

标签： jquery html google-apps-script google-sheets

【解决方案1】：

为此，您需要两个组件：

用于与数据交互的服务器端 .gs 脚本。
客户端 HTML 和 jQuery 请求和显示数据。

您的第一次尝试已接近尾声。您需要使用.ready() 函数向脚本发送请求，然后使用某种 jQuery 构造函数处理返回的数组。

此（简化）脚本将在应用加载时根据电子表格中的数据动态创建 div。

Utils.gs

function getData() {
  // Using getActiveSpreadsheet() only works with bound scripts.
  var ss = SpreadsheetApp.getActiveSpreadsheet(); 

  // I don't like getSheets() because indicies change if sheets are reordered. Consider using getSheetByName() instead.
  var sheet = ss.getSheets()[0];

  // This returns a 2D array of data you can manipulate
  var faqList = sheet.getRange(1,1,sheet.getLastRow(),2).getValues();

  // Send the array to the client
  return faqList
}

代码.gs

// This serves templated HTML, meaning you can have variables defined.
// index.html can include scripts for working with data.
function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate()
}

index.html

<html>
  <head>
  <!-- load jQuery here -->
  </head>
  <body>
  <!-- load an empty container for the spreadsheet data -->
  <div id="container"></div>

  <script type="text/javascript">
  $(document).ready(function(){
    // Call the Google function right away
    google.script.run.withSuccessHandler(buildDivs).getData()
  })

  function buildDivs(data) {
    // Loop the data to build the divs
    var container = $("#container");
    for(var i=0; i<data.length; i++) {
      var el = "<button class='accordion'>" + data[i][0] + "</button><div class='panel'><p>" + data[i][1] + "</p></div>"

      container.appendChild(el);
    }
  }
  </script>
  </body>
</html>

【讨论】：