微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

如何在 Google 网站上为 Google Sheet 创建外部参考页面

分类：编程问答

如何解决如何在 Google 网站上为 Google Sheet 创建外部参考页面

我创建了一个 Google Sheet，其中包含学生的一些数据。Example Data Sheet

现在我想创建一个google site页面，以便我的学生可以confirm输入的数据是否正确（我的 Google 表格将包含 3000 多个学生数据）

创建搜索页面

Search Page Look 1

页面将如下所示，当学生开始输入他/她的唯一 ID 时，必须从 {{3} 中的 predictive 中的 Id 列表中给出 column A Id }

在示例中，当学生开始输入 199 时，下拉列表将显示过滤器中以 199 开头的 ID，该 ID 位于 Google Sheet 中的 column A

创建详细页面

  • 在学生输入他/她的 ID 并点击搜索按钮后，在该 ID 下输入的数据应垂直显示

举个例子，当一个学生搜索他的ID 198980204105，那么它应该在Google Sheet中搜索column A他的ID，并相应地给出如下图的其他结果

Google Sheet

在这个例子中

  • 学生搜索了他的 ID 198980204105
  • 此 ID 198980204105 位于

    SEARCH RESULTS FOR-198980204105

     中的单元格 A11
  • 因为 ID 在第 11 行，所以第 11 行的详细信息如上图所示

关注点

解决方法

如何创建网络表单以从 Google 表格中获取数据

本教程将向您展示如何创建网络表单以从 Google 表格中搜索和获取数据。您可以与他人共享此网络表单，让他们在您的 Google 表格中搜索数据。

当您想要共享 Google 表格的一部分而不授予访问整个电子表格的权限时，这也很有用。在这种情况下，您可以使用这种方法创建用户友好的网页来共享您的 Google 表格数据。

您可以遵循两种方法来使用 Google Apps 脚本。第一个是Container-bound Scripts，第二个是Standalone Scripts。这里我使用的是第二个，因此它不会将脚本绑定到 Google Sheet。

现场演示

您可以通过以下链接访问本教程中使用的实时网络表单和 Google 表格。

  1. LIVE FORM
  2. GOOGLE SHEET (DATA SOURCE)
  3. VIDEO DEMO

如何创建上述网络表单以从 Google 表格中获取数据

步骤 01 – 准备您的 Google 表格

对于本教程，您可以使用自己的数据表（Google 表），也可以通过以下链接复制本教程中使用的 Google 表。您还可以使用此 Google 表格的 Spreadsheet ID，甚至无需将其复制到您的 Google 云端硬盘。 LINK TO THE GOOGLE SHEET (DATA SOURCE)

步骤 02 – 复制 Google Apps 脚本文件

您可以通过以下链接将 Google Apps 脚本文件复制到您的驱动器。

LINK TO THE APP SCRIPT

上述 Google Apps 脚本文件包含以下两个文件。这里我不打算逐行解释代码。相反，我将在下面简要说明每个文件和功能的用途

  1. 索引.html

  2. 代码.gs

    1. Index.html 文件 此文件包括搜索表单的 HTML 代码以及所需的 JavaScript 文件和函数。在这里，我使用 Bootstrap 来设置表单和表格的样式。您可以在第 5、6 和 7 行中看到包含的 Bootstrap 相关文件。

搜索表单位于第 89 行到第 97 行。点击搜索按钮后，它将执行 handleFormSubmit JavaScript 函数（在第 24 行）。该函数从服务器获取相关的搜索结果（解释如下）并将它们传递给 createTable 函数（第 30 行）。

在 createTable 函数中，第 35 行到第 59 行是结果表的列标题。您应该按照与您的 Google 表格中相同的顺序编写此内容。 dataArray 变量包含从 handleFormSubmit 函数接收的搜索结果。 createTable 函数根据 dataArray 变量中的值创建表，并在第 106 行打印结果。

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
         
        <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
        <script>
          //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit',function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load",preventFormSubmit,true); 
              
           
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }
         
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+                               //Change table headings to match witht he Google Sheet
                              "<th scope='col'>ORDERNUMBER</th>"+
                              "<th scope='col'>QUANTITYORDERED</th>"+
                              "<th scope='col'>PRICEEACH</th>"+
                              "<th scope='col'>ORDERLINENUMBER</th>"+
                              "<th scope='col'>SALES</th>"+
                              "<th scope='col'>ORDERDATE</th>"+
                              "<th scope='col'>STATUS</th>"+
                              "<th scope='col'>QTR_ID</th>"+
                              "<th scope='col'>MONTH_ID</th>"+
                              "<th scope='col'>YEAR_ID</th>"+
                              "<th scope='col'>PRODUCTLINE</th>"+
                              "<th scope='col'>MSRP</th>"+
                              "<th scope='col'>PRODUCTCODE</th>"+
                              "<th scope='col'>CUSTOMERNAME</th>"+
                              "<th scope='col'>PHONE</th>"+
                              "<th scope='col'>ADDRESSLINE1</th>"+
                              "<th scope='col'>ADDRESSLINE2</th>"+
                              "<th scope='col'>CITY</th>"+
                              "<th scope='col'>STATE</th>"+
                              "<th scope='col'>POSTALCODE</th>"+
                              "<th scope='col'>COUNTRY</th>"+
                              "<th scope='col'>TERRITORY</th>"+
                              "<th scope='col'>CONTACTLASTNAME</th>"+
                              "<th scope='col'>CONTACTFIRSTNAME</th>"+
                              "<th scope='col'>DEALSIZE</th>"+
                            "</tr>"+
                          "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
         
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
             
                  <!-- ## SEARCH FORM ------------------------------------------------ -->
                  <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <label for="searchtext">Search Text</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Search Text">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">Search</button>
                  </form>
                  <!-- ## SEARCH FORM ~ END ------------------------------------------- -->
               
              </div>    
            </div>
            <div class="row">
              <div class="col">
             
                <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
                <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
                   
              </div>
            </div>
        </div>
    </body>
</html>

2. Code.gs 文件 此文件包含服务器端脚本。上面提到的Index.html 文件中的handleFormSubmit 函数将formObject 传递给这个Code.gs 文件中的processForm 函数。

如果 formObject 包含搜索文本，则传递给搜索函数。

在搜索功能中，根据您的 Google 表格和数据范围替换 spreadhseetId 和 dataRange。

搜索函数在 Google Sheet 中查找匹配的内容，并将行数组返回给 processForm 函数。它将结果返回给 Index.html 文件中的 handleFormSubmit 函数。

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}
 
 
/* PROCESS FORM */
function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){//Execute if form passes search text
      result = search(formObject.searchtext);
  }
  return result;
}
 
//SEARCH FOR MATCHED CONTENTS 
function search(searchtext){
  var spreadsheetId   = '142FbylWc7109R0RsXQ42NuN_TFs-D3RTtIYJOSBR1QM'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId,dataRage).values;
  var ar = [];
   
  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

完成所有编码后，您可以通过将其部署为 Web 应用程序来获取此 Web 应用程序的 URL。要做到这一点，

  1. 转到 Google Apps 脚本文件
  2. 然后转到“发布”并选择“部署为网络应用...”
  3. 对于“执行应用程序”；字段选择您的电子邮件。
  4. 在“谁有权访问应用”下：选项选择“任何人”
  5. 点击“更新”
  6. 复制下一个窗口中的 URL 并粘贴到浏览器中以访问表单。

总结

借助 Google Apps Script，您可以免费构建各种类型的网络应用。在构建这些网络应用程序时，您可能需要构建一个搜索选项，以便将数据从 Google 表格传送到网络应用程序。

本教程向您解释了如何在您的网络应用中创建一个基本的搜索表单以从 Google 表格中检索数据。

说明来自 https://www.bpwebs.com/ *** bpwebs.com 的所有积分 ***我从这个网站找到了答案

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot