Filtern von HTML-Tabellendaten basierend auf Gmail Anmelden von Benutzern

Meine Seite besteht aus HTML-Tabelle und oben habe ich eine Suchschaltfläche hinzugefügt. Ich habe "Session.getActiveUser(). GetEmail()" verwendet, um die E-Mail-Adresse von Google Mail zu erhalten. wenn Benutzer anmelden/die Web-App öffnen, melden Sie sich an Benutzer E-Mail-Adresse sollte Eingang in die Suchleiste und Suchfunktion sollte entsprechendFiltern von HTML-Tabellendaten basierend auf Gmail Anmelden von Benutzern

Smaple Sheet Webapp

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

<!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>

Quelle

2017-10-24 KiKu

Sie müssen nur hinzufügen, wenn die Bedingung für die E-Mail-Adresse des angemeldeten Benutzers zu überprüfen, während die Tabellenzeilen anhängen. Bitte beachten Sie den folgenden Code.

code.gs

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

index.html

<!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"> 
    <div class="container"> 
    <font color="#440F89"><b>Your Requset and updated Status as Below</b></font> 
    <input class="email" type="text" id="myInput" oninput="myFunction()" value="<?=email?>"> 
    <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++) { 
    if(data[i][0].toUpperCase() !== email.toUpperCase()) {?> 
    <tr style="display:none;"> 
     <? for (var j = 0; j < data[i].length; j++) { ?> 
     <td><?= data[i][j] ?></td> 
     <? } ?> 
    </tr> 
    <? } else{ ?> 
    <tr> 
     <? for (var j = 0; j < data[i].length; j++) { ?> 
     <td><?= data[i][j] ?></td> 
     <? } ?> 
    </tr> 
    <?} }?> 
</table> 
</div> 



<script> 
function myFunction() { 
    var span, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 1; 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>

Quelle

2017-10-24 11:15:50 Ritz

Ihre Funktion getCurrentUserEmail() laufen gebe nur einen String zurück, der die E-Mail ist.

Also in Ihrer dispEmail (Daten) -Funktion, Daten sind nur die Zeichenfolge, die Sie zurückgegeben haben. Wenn Sie anzeigen möchten data.email es nicht als Daten kein json ist nicht funktioniert, aber ein String so muss Ihre Funktion sein:

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

bearbeiten nach dem 1. Antwort: die Filterfunktion starten Sie haben um es in Ihrem Erfolgshandler hinzuzufügen.

$(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 
    }

Stéphane

Quelle

2017-10-24 10:02:34 St3ph

@ Stéphane ich Eingabefeld die E-Mail-Adresse auf der Suche der Lage bin, aber Filter-Skript funktioniert nicht (siehe das aktualisierte Bild Snap) – KiKu

Ich habe meine Antwort bearbeitet. Sie müssen die myFunction ausführen, nachdem Sie die E-Mail hinzugefügt haben. Rufen Sie einfach die Funktion an. – St3ph

Filtern von HTML-Tabellendaten basierend auf Gmail Anmelden von Benutzern

Antwort

Verwandte Themen