从Google Sheet将数组值添加到HTML侧边栏(Google Apps脚本)
从Google Sheet将数组值添加到HTML侧边栏(Google Apps脚本)
提问于 2018-07-06 05:59:00
因此，我有一个包含酒店名称列表的电子表格。酒店名称列在单元格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文件中，我已经知道了如何将一个值推入第一个“result”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…
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-06 07:23:15
这个修改怎么样？
修改点：
用于GAS的
- ，将
var targetCells = ["D25", "D26",,,]修改为“D25:D55”。用于Javascript的 - ，修改为
var idArray = ["result1", "result2", "result3"]
修改后的脚本
气体：
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"];.
如果这不是你想要的，请告诉我。我想修改一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51200441
复制相关文章
相似问题