根据用户输入从 Google 表格中将数据提取到 html 页面

Question

我有一个谷歌电子表格，四列中有几行数据，其标题是

员工证 | 姓名 | 年龄 | 名称 |

我想创建一个 web 应用程序（带有表单元素的 html 页面），如果我在文本字段中输入员工 ID 值（这是唯一的）并单击提交，其他三个详细信息（即姓名、年龄、指定）在同一页面的下表中仅显示该特定员工。

我看不到任何示例，其中工作表的 select 部分根据用户输入值作为表格返回。

非常感谢帮助。

Answer 1

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

您可能还想研究 scriptlet。 基本上，这允许您使用标签<?在 HTML 中执行应用脚本代码和?> 。

模板化的 HTML文档提供了一些示例，您可以根据需要进行扩展。

您可能还想在此处研究一些示例。

Answer 2

尝试这样的事情：

请注意，我尚未对此进行测试，因此可能需要进行一些调整。

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');
}