Добавить значения массива на боковую панель HTML из Google Sheet (Google Apps Script) - PullRequest
Новая
       11

Добавить значения массива на боковую панель HTML из Google Sheet (Google Apps Script)

0 голосов
/ 06 июля 2018

Итак, у меня есть электронная таблица со списком названий отелей. Названия отелей указаны в ячейках D25-D57 (исключая D37-38, 44-45, 51-52).

Я написал скрипт для создания боковой панели, и идея в том, что на боковой панели будут перечислены все отели, перечисленные в электронной таблице. Вот мой HTML-шаблон: 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
  </script>
  <style>
    .sortableItem {
      height: 50px;
      width: 300px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: 10px;
      text-align: center;
      font-weight: bold;
      border-radius: 0 10px 10px 0;
      background-color: #e7f0fe;
      color: gray;
      margin: 3px;
    }

    .sortableItem:hover {
      cursor: pointer;
    }

    #sortable {
      float: left;
    }

    #times {
      float: left;
    }

    .day {
      background-color: #4285f4;
      color: white;
    }
  </style>
  <script>
    $(function() {
      $("#sortable").sortable();
    });

    $(".sortable").sortable({
      cancel: ".disable-sort-item"
    });
  </script>
</head>
<body>
  <div id="sortable">
    <div class="sortableItem day">Monday</div>
    <div class="sortableItem" id="result1"></div>
    <div class="sortableItem" id="result2"></div>
    <div class="sortableItem" id="result3"></div>
    <div class="sortableItem" id="result4"></div>
    <div class="sortableItem" id="result5"></div>

    <div class="sortableItem day">Tuesday</div>
    <div class="sortableItem" id="result6"></div>
    <div class="sortableItem" id="result7"></div>
    <div class="sortableItem" id="result8"></div>
    <div class="sortableItem" id="result9"></div>
    <div class="sortableItem" id="result10"></div>

    <div class="sortableItem day">Wednesday</div>
    <div class="sortableItem" id="result11"></div>
    <div class="sortableItem" id="result12">Hotel 2</div>
    <div class="sortableItem" id="result13">Hotel 3</div>
    <div class="sortableItem" id="result14">Hotel 4</div>
    <div class="sortableItem" id="result15">Hotel 5</div>

    <div class="sortableItem day">Thursday</div>
    <div class="sortableItem" id="result16"></div>
    <div class="sortableItem" id="result17"></div>
    <div class="sortableItem" id="result18"></div>
    <div class="sortableItem" id="result19"></div>
    <div class="sortableItem" id="result20"></div>

    <div class="sortableItem day">Friday</div>
    <div class="sortableItem" id="result21"></div>
    <div class="sortableItem" id="result22"></div>
    <div class="sortableItem" id="result23"></div>
    <div class="sortableItem" id="result24"></div>
    <div class="sortableItem" id="result25"></div>
  </div>
</body>
</html>

Имена отелей должны идти в div с идентификатором "result1, 2" и т. Д.

В моем файле GS есть следующее: 

var ss = SpreadsheetApp.getActive();
var sheet = ss.getActiveSheet();

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Menu')
    .addItem('Sort meeting order', 'openSortableSidebar')
    .addToUi();
}

function openSortableSidebar(data) {
  var html = HtmlService.createTemplateFromFile('sortable');
  var sidebar_html = html.evaluate();
  SpreadsheetApp.getUi().showSidebar(sidebar_html);
}

var hotelName = "";
var targetCells = [
  "D25",
  "D26",
  "D27",
  "D28",
  "D29",
  "D32",
  "D33",
  "D34",
  "D35",
  "D36",
  "D39",
  "D40",
  "D41",
  "D42",
  "D43",
  "D46",
  "D47",
  "D48",
  "D49",
  "D50",
  "D51",
  "D52",
  "D53",
  "D54",
  "D55"
];

function findHotel() {
  var hotelNames = [];
  for (var i = 0; i < targetCells.length; i++) {
    hotelName = sheet.getRange(targetCells[i]).getValue();
    hotelNames.push(hotelName);
    return hotelNames;
  }
}

Таким образом, у меня есть целевые ячейки (то есть те, которые содержат названия отелей в моей электронной таблице) в виде массива, и мой цикл for работает успешно, поскольку он проталкивает все имена отелей в этих ячейках в массив. Моя проблема в связи с этой стороны сервера.

Таким образом, в моем HTML-файле я разработал, как вставить одно значение в первый div «result», и мне удалось написать цикл for, проталкивающий одно и то же значение во все div. Но я не могу протолкнуть массив успешно. Вот что я попробовал: 

<script>  
  var idArray = ["result1", "result2", "result3"]

  function addHotel(hotelNames){
    for(var i=0; i<idArray.length +1; i++){
      $('#result' + i).text(hotelNames[i]);
    }
  }; 
  google.script.run.withSuccessHandler(addHotel).findHotel();
</script>

Я знаю, что все не так просто, но я застрял на этом. Если кто-то может помочь, это будет с благодарностью:)

PS: мой массив идентификаторов, очевидно, будет длиннее и увеличится до 25 обычно ...

1 Ответ

0 голосов
/ 06 июля 2018

Как насчет этой модификации?

Очки модификации:

  • Для ГАЗА изменено var targetCells = ["D25", "D26",,,] на "D25: D55".
  • Для Javascript, изменен var idArray = ["result1", "result2", "result3"] на var idArray = 25.

Модифицированный скрипт

ГАЗ: 
var ss = SpreadsheetApp.getActive();
var sheet = ss.getActiveSheet();

function onOpen() {
  SpreadsheetApp.getUi() 
  .createMenu('Menu')
  .addItem('Sort meeting order', 'openSortableSidebar')
  .addToUi();
}

function openSortableSidebar(data) {
  var html = HtmlService.createTemplateFromFile('sortable');
  var sidebar_html = html.evaluate();
  SpreadsheetApp.getUi().showSidebar(sidebar_html);
}

// This function was modified
function findHotel() {
  var rangeData = ["D25:D29", "D32:D36", "D39:D43", "D46:D51", "D53:D57"];
  var ranges = sheet.getRangeList(rangeData).getRanges();
  var values = ranges.map(function(e){return e.getValues().map(function(e){return e[0]})});
  return Array.prototype.concat.apply([], values);
}
Javascript: 
<script> 
  var idArray = 25; // Modified

  function addHotel(hotelNames){
    for(var i=0; i<idArray; i++){ // Modified
      $('#result' + (i + 1)).text(hotelNames[i]); // Modified
    }
  };

  google.script.run.withSuccessHandler(addHotel).findHotel();
</script>

Примечание:

  • HTML не изменяется.
  • В этом модифицированном скрипте установите желаемые диапазоны следующим образом.
    • var rangeData = ["D25:D29", "D32:D36", "D39:D43", "D46:D51", "D53:D57"];.

Если это не то, что вы хотите, пожалуйста, скажите мне. Я хотел бы изменить его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...