Question

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

我正在尝试在Google Scripts中编写一个脚本，这样我就可以从第1列中提取所有值并将其放入特定的button标记中，并将第2列中的值放在一个带有{的单独类中{1}}标记。

如果有人在Google脚本中手写内容，那么这就是我的代码：

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

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

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

<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>

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

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

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

Answer 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
}

<强> Code.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>

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

1 个答案: