Question

我的网页由HTML表格组成，我已经添加了一个搜索按钮。我使用了＆＃34; Session.getActiveUser（）。getEmail（）＆＃34;获取Gmail登录用户的电子邮件地址。当用户登录/打开网络应用时，登录用户的电子邮件地址应在搜索栏中输入，搜索功能应相应运行

Smaple Sheet Webapp

＆＃13;

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
   .evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}



function getCurrentUserEmail()
{
  var email={'email':Session.getActiveUser().getEmail()};//returned as an object
  return email;
}

function getData() {
  return SpreadsheetApp
      .openById('1ElSP7aTrXLt4oan40POwFLjFBOie-FybrHPBx-DuhV8')
      .getSheetByName("Sheet2")
      .getDataRange()
      .getValues();
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 14px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 5px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>

<body>

 <div class="container-fluid">
 <div class="row">
<nav class="navbar navbar-inverse">
 
</nav>
</div>
</div>


<hr>
    <base target="_top">
    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <script>
    $(function() {
    google.script.run
      .withSuccessHandler(dispEmail)
      .getCurrentUserEmail();
     });//runs after dom is loaded
     function dispEmail(data)
     {
       $('.email').text(data.email);//put's email into h1 tag
     }
     console.log('My Code');
    </script>
  <div class="container">
    <font color="#440F89"><b>Your Requset and updated Status as Below</b></font>
   <!-- <input class="email" type="text" id="myInput" onchange="myFunction()" > -->
<span class="email" type="text" id="myInput" onchange="myFunction()" ></span>
   <hr>  
   </div>
<? var data = getData(); ?>
<div class="container">
<table id="myTable"class="table table-striped table-bordered table-hover table-condensed myTable">
<tr>
  <td class="bg-primary"><b>Requester Name</b></td>
  <td class="bg-primary"><b>Request Type</b></td>
  <td class="bg-primary"><b>Request For</b></td>
  <td class="bg-primary"><b>Short Description</b></td>
  <td class="bg-primary"><b>Business Reason for Request/Purpose</b></td>
  <td class="bg-primary"><b>Urgency</b></td>
  <td class="bg-primary"><b>SM Team Member(Assgined)</b></td>
  <td class="bg-primary"><b>Notes</b></td>
  <td class="bg-primary"><b>Resolution</b></td>
  <td class="bg-primary"><b>Status</b></td>
</tr>
  <? for (var i = 0; i < data.length; i++) { ?>
    <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
        <td><?= data[i][j] ?></td>
      <? } ?>
    </tr>
  <? } ?>
</table>
</div>



<script>
function myFunction() {
//var input, filter, table, tr, td, i; "replaced with below tag"
  var span, filter, table, tr, td, i;
  //input = document.getElementById("myInput"); "replaced with below tag"
  span = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

＆＃13;

Answer 1

您只需添加if条件以在附加表行时检查已记录用户的电子邮件地址。请参考以下代码。

<强> code.gs

new

<强>的index.html

function doGet() {

  var template = HtmlService.createTemplateFromFile('index');
  template.email = Session.getActiveUser().getEmail();
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}  

function getData() {
  return SpreadsheetApp
      .openById('1bDInWEbbdXOf6LbYC5UMQBCqGFEqpdhNjWsyUeCYTtw')
      .getSheetByName("Sheet2")
      .getDataRange()
      .getValues();
}

Answer 2

你的函数getCurrentUserEmail（）只返回一个字符串，即电子邮件。

因此，在您的dispEmail（数据）函数中，data只是您返回的字符串。当你想显示data.email它不起作用，因为数据不是json而是字符串所以你的函数必须是：

function dispEmail(data)
     {
       $('.email').text(data);//put's email into h1 tag
     }

第一次回答后修改：要启动过滤器功能，您必须将其添加到成功处理程序中。

$(function() {
    google.script.run
      .withSuccessHandler(dispEmail)
      .getCurrentUserEmail();
     });//runs after dom is loaded

function dispEmail(data)
     {
       $('.email').text(data);//put's email into h1 tag
       myFucntion();//To start filtering
     }

斯特凡

如何根据Gmail登录用户过滤HTML表格数据

2 个答案: