Question

因此，我有一个电子表格，其中包含酒店名称列表。酒店名称列在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>

酒店名称应进入ID为“ result1、2”等的div中。

在我的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，并设法编写一个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：我的id数组显然会更长，通常会增加到25个...

Answer 1

此修改如何？

修改点：

对于GAS，将var targetCells = ["D25", "D26",,,]修改为“ D25：D55”。
对于Java语言，将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"];。

如果这不是您想要的，请告诉我。我想修改它。

将数组值从Google表格添加到HTML边栏（Google Apps脚本）

1 个答案:

修改点：

修改后的脚本

注意：