Google Script: извлечение данных из двух столбцов и динамическое создание классов div - PullRequest
Новая
       3

Google Script: извлечение данных из двух столбцов и динамическое создание классов div

0 голосов
/ 23 мая 2018

У меня есть электронная таблица с двумя столбцами.Вы можете найти образец здесь .

Я пытаюсь написать скрипт в 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>

Я хочу создать скрипт, который будет динамически создавать эту табличную структуру в Google Scripts с JQuery.

В настоящее время это то, что у меня есть с 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, поэтому я не уверен, почему она не работает в этой конкретной ситуации.

1 Ответ

0 голосов
/ 23 мая 2018

Для этого вам понадобятся два компонента:

  1. Сценарии на стороне сервера .gs для взаимодействия с данными.
  2. 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...