根据用户输入将数据从Google Sheets拉到html页面



我有一个谷歌电子表格,有四列几行数据,标题为

员工ID |名字|年龄|指定|

我想创建一个web应用程序(html页面与表单元素)在其中,如果我在一个文本字段中放入员工ID值(这是唯一的),并单击提交,其他三个详细信息(即名称,年龄,指定)只有那个特定的员工显示在下面的表中在同一页。

我没有看到任何基于用户输入值将工作表的选定部分作为表返回的示例。

感谢您的帮助。

虽然我将无法编写您的web应用程序,但您可以从研究HTML中的客户端-服务器通信开始。google.script.runAPI是最基本的调用,你可以从它开始。

你可能也想研究一下scriptlet。基本上,这允许你在HTML中使用标签<??>来执行Apps Script代码。

模板化的HTML文档提供了一些示例,您可以根据需要展开这些示例。

你可能还想在这里学习一些例子。

试试这样:

注意:我还没有测试过这个,所以可能需要一些调整。

HTML:

<html>
<head>
<base target="_top">
</head>
<body>
<div id="msg"></div><!-- You can add css to hide these and then turn them on with js as required -->
<div id="found"></div>
<form>
<input type="text" name="id" placeholder="Enter Employee ID" /><br />
<input type="button" value="Search" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
google.script.run
.withSuccessHandler((obj)=>{
if(!obj.msg) {
document.getElementById('found').innerHTML=`EmployeeId: ${obj.id} Name: ${obj.n} Age: ${obj.a} Designation: ${obj.d}`;
}else{
document.getElementById('found').innerHTML=`Message: ${obj.msg}`;
}
})
.search(obj);
}
console.log("My Code");
</script>
</body>
</html>

GS:

function mysearch(obj) {
const ss=SpreadsheetApp.getActive();
const sh=ss.getSheetByName('Sheet1');
const [hA, ...data]=sh.getDataRange().getValues();
let idx={};
let found=false;
hA.forEach((h,i)=>{idx[h]=i;});
for(var i=0;i<data.length;i++) {
if(data[i][idx['EmployeeID']]==obj.id) {
Logger.log({id:obj.id,n:data[i][idx['Name']],a:data[i][idx['Age']],d:data[i][idx['Designation']]});
found=true;
break;
}
}
if(found){
return {id:obj.id,n:data[i][idx['Name']],a:data[i][idx['Age']],d:data[i][idx['Designation']]};
} else {
return {msg:"Not found"}
}
}
function launchMyNewDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah1'),'test');
}

最新更新