如何解决如何将 Google 表格中的一系列值设置为 <datalist> 代码.gsindex.html代码.gsindex.html参考资料
我有一些 Google Sheet，里面有一个可编辑的职位列表（'Items'！A1:A）。我还有另一个表，它使用该方法从在 Google Web Apps 中创建的页面写入数据。我需要它来包含第一个工作表范围内的值。
<script>
var datalist = document.getElementById('wrkList');
var fragment = document.createDocumentFragment();
var myList = ['Item1','Item2','Item3'];
// Prepare the option elements to be rendered.
myList.forEach(function(wrk) {
var option = document.createElement('option');
var text = document.createTextNode(wrk);
option.value = wrk;
option.appendChild(text);
fragment.appendChild(option);
});
// Append all of them to DOM.
datalist.appendChild(fragment);
</script>
如何将第一个 Google Sheets ('Items'!A1:A) 范围内的值传递给 myList 变量？
UPD。我将尝试更详细地解释我需要什么。
<input type="text" list="wrkList" />
<datalist id="wrkList"></datalist>
和 .gs 中的函数：
function itemsList() {
var sheet = SpreadsheetApp.openById('1WeO8SyHj259jashQKXZ0WT_saSZHgk31yAQ1kZqiWpc').getSheetByName("Items");
var lastrow = sheet.getLastRow();
var myList = sheet.getRange(1,1,lastrow).getValues();
return myList;
}
我需要将 itemsList() 函数获得的值作为值传递给 datalist
解决方法
与 Apps 脚本的“服务器客户端”或“客户端服务器”通信示例
这是一个最小的例子，展示了如何将您的数据作为数组输入到前端。
代码.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("index")
}
function getInfo() {
let file = SpreadsheetApp.getActive();
let sheet = file.getSheetByName("Items");
let range = sheet.getRange("A1:A");
let values = range.getValues();
return JSON.stringify(values);
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id=main>Run</button>
<script>
function main(){
google.script.run.withSuccessHandler(handleInfo).getInfo()
}
function handleInfo(info){
console.log(JSON.parse(info))
}
const mainButton = document.getElementById("main")
mainButton.addEventListener('click',() => main())
</script>
</body>
</html>
如果你运行这个，那么你应该将范围记录到控制台。
您可能不需要 JSON.stringify JSON.parse - 如果您的数据只是数字和字符串。如果它是约会之类的东西，那么您将需要它。
到目前为止您的代码
您似乎正在尝试从纯 JavaScript 上下文中调用 Apps 脚本特定的内容。像 SpreadsheetApp 这样的东西在 JavaScript 中不存在，只在 Apps Script 中存在。因此，您的网络应用程序中的 <script> 标记不能包含任何直接引用电子表格的内容。您需要使用
google.script.run.withSuccessHandler(handleInfo).itemsList()
这将向 Apps 脚本发送请求，以在 itemsList() 文件中运行 .gs。该函数返回的任何内容都将用作本地 handleInfo 函数的参数。即当 Apps Script 函数成功时，它会这样做：
handleInfo([with whatever itemsList returns])
理想情况下，您让 itemsList 返回一个简单的字符串数组，以便您可以轻松创建 <option> 元素以插入到您的数据列表中。
工作示例
我不知道你的数据是什么样的，所以我自己发明了一些：
我也不知道您的脚本的其余部分是什么样子，也不知道您的 html 文件的名称，所以我尽可能多地填补了空白。
我还必须使用自己的电子表格 ID 进行测试，但在下面的示例中，我使用了您提供的电子表格 ID。
代码.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("index")
}
function itemsList() {
var sheet = SpreadsheetApp.openById('1WeO8SyHj259jashQKXZ0WT_saSZHgk31yAQ1kZqiWpc').getSheetByName("Items");
var lastrow = sheet.getLastRow();
var myList = sheet.getRange(1,1,lastrow).getValues();
// This line is to transform the array from [[1],[2],[3]] to [1,2,3]
myList = myList.map(item => item[0])
return JSON.stringify(myList); // JSON.stringify may not be neccesary
}
index.html
<!DOCTYPE html>
<html>
<body>
<input type="text" list="wrkList"/>
<datalist id="wrkList"></datalist>
</body>
<script>
function handleInfo(info){
const list = JSON.parse(info) // JSON.parse needed if you used JSON.stringify in Code.gs
// select datalist element
const datalist = document.getElementById('wrkList')
// forEach loop to create and append an option element for each item in list
list.forEach(item => {
const option = document.createElement('option')
option.setAttribute('value',item)
datalist.appendChild(option)
})
}
// execute the itemsList function in code.gs and with the response
// execute the handleInfo function.
google.script.run.withSuccessHandler(handleInfo).itemsList()
</script>
</html>
一旦被删除，这将加载一个带有以下内容的 HTML 页面：
参考资料
,我更改了代码：
<script>
var sheet = SpreadsheetApp.openById('1WeO8SyHj259jashQKXZ0WT_saSZHgk31yAQ1kZqiWpc').getSheetByName("Items");
var lastrow = sheet.getLastRow();
var datalist = document.getElementById('wrkList');
var fragment = document.createDocumentFragment();
var myList = sheet.getRange(1,lastrow).getValues();
// Prepare the option elements to be rendered.
myList.forEach(function(wrk) {
var option = document.createElement('option');
var text = document.createTextNode(wrk);
option.value = wrk;
option.appendChild(text);
fragment.appendChild(option);
});
// Append all of them to DOM.
datalist.appendChild(fragment);
</script>
但在控制台中出现此错误：
未捕获的 ReferenceError：SpreadsheetApp 未定义 在 userCodeAppPanel:2
,您可以尝试使用 SpreadsheetApp.openById()。
您可以找到 SpreadsheetApp here 的文档。
请参阅下面的改编代码：
var datalist = document.getElementById('wrkList');
var fragment = document.createDocumentFragment();
var myList = SpreadsheetApp.openById('THE_ID_OF_YOUR_SPREADSHEET').getSheetByName('THE_SHEET_NAME').getRange('THE_RANGE').getValue();
// Prepare the option elements to be rendered.
myList.forEach(function(wrk) {
var option = document.createElement('option');
var text = document.createTextNode(wrk);
option.value = wrk;
option.appendChild(text);
fragment.appendChild(option);
});
// Append all of them to DOM.
datalist.appendChild(fragment);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
