时间戳

首页 > 解决方案 > 使用 Google 表格和 Apps 脚本创建可搜索的电话目录？

javascript - 使用 Google 表格和 Apps 脚本创建可搜索的电话目录？

问题描述

我为一个基于谷歌云的慈善机构工作。他们的资源有限，没有 SQL 数据库，我被要求开发一个可搜索的电话簿，该目录位于我们的 Intranet 上。

请看下面的code.gs：

function doGet(e){
  var ss = SpreadsheetApp.openById('sheetId');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
    });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function myFunction1(){
  var ss = SpreadsheetApp.openById('sheetid');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
     });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setWidth(1020).setHeight(800);
  SpreadsheetApp.getUi().showModalDialog(html, 'Title');

我将把它部署为一个 web 应用程序，并且在下面也包含了 index.html：

<script>
  var datags = <?!= JSON.stringify(data) ?>;
</script>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous">
  </head>
  <body>
     <div style="padding: 5px 20px; width: 50%;">
        <header class="text-center" style="padding: 15px;">
          <h1>Age UK Essex Staff Directory</h1>
        </header>
        <input type="text" id="filter"/>
        <input type="button" id="btnFilter" value="Filter" />
        <table id="myTable" class="table table-striped" style="margin-top: 10px;">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Service</th>
            <th>Role</th>
            <th>Location</th>
            <th>Desk Phone</th>
            <th>Mobile Phone</th>
            <th>Email</th>
          </tr>
        </table>
      </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(function(){
        console.log(datags);
          jQuery.each(datags, function() {
              console.log(this);
            $('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>'+this.firstname+'</td><td>'+this.lastname+'</td><td>'+this.service+'</td><td>'+this.role+'</td><td>'+this.location+'</td><td>'+this.deskphone+'</td><td>'+this.mobilephone+'</td><td>'+this.email+'</td></tr>')
          })
        });
     </script>
     <script>
       $(document).ready(function() {
         $("#btnFilter").click(function() {
         $("#myTable tr").show();
          if($("#filter").val.length > 0) {
             $("#myTable tr").filter(function(index, elm) {
                return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
            }).hide();
        }
    });
});
    </script>
  </body>
</html>

这在大多数情况下都有效，尽管当我删除 seacrh 标准时，如果内容恢复正常而不是停留在前一个座位的结果上，我更喜欢它。

标签： javascriptgoogle-apps-scriptgoogle-sheets

解决方案

您可以使用setInterval每 X 毫秒运行一次过滤器功能。

例如，将您的 HTML 修改为以下内容：

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div style="padding: 5px 20px; width: 50%;">
        <header class="text-center" style="padding: 15px;">
            <h1>Age UK Essex Staff Directory</h1>
        </header>
        <input type="text" placeholder="Filter directory..." id="filter" />
        <input type="button" id="btnFilter" value="Filter" />
        <table id="myTable" class="table table-striped" style="margin-top: 10px;">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Service</th>
                <th>Role</th>
                <th>Location</th>
                <th>Desk Phone</th>
                <th>Mobile Phone</th>
                <th>Email</th>
            </tr>
        </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var datags = <?!= JSON.stringify(data) ?> ;
        console.log(datags);

        function initialize() {
            jQuery.each(datags, function() {
                $('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>' 
                + this.firstname + '</td><td>' 
                + this.lastname + '</td><td>' 
                + this.service + '</td><td>' 
                + this.role + '</td><td>' 
                + this.location + '</td><td>' 
                + this.deskphone + '</td><td>' 
                + this.mobilephone + '</td><td>' 
                + this.email + '</td></tr>'
                )
            });
        }

        function filter() {
            $("#myTable tr").show();
            if ($("#filter").val.length > 0) {
                $("#myTable tr").filter(function(index, elm) {
                    return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
                }).hide();
            }
        }

        $(document).ready(
            function() {
                initialize();
                $("#btnFilter").click(filter);
                setInterval(filter, 1000);
            }
        );
    </script>
</body>

</html>

参考：

推荐阅读