Пожалуйста, смотрите код ниже, я пытаюсь использовать Gsheets в качестве базы данных для контактных данных сотрудников, мне нужно сделать этот поиск доступным, но я застрял. Любые указатели приветствуются.
<script>
var datags = <?!= JSON.stringify(data) ?>;
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet"ref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div>
<header class="text-center ">
<h1>Age UK Essex Staff Directory</h1>
</header>
<table id="myTable" class="table table-striped">
<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>Other Phone</th>
<th>Email</th>
<th>Fax</th>
<th>Postal Address</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><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.otherphone+'</td><td>'+this.email+'</td><td>'+this.fax+'</td><td>'+this.postaladdress+'</td></tr>')
})
});
</script>
</body>
</html>
Приведенный выше код составляет мой индексный файл. html, а ниже - мой код скрипта Google, я проверил это, и он работает, как и ожидалось. Теперь мне нужно добавить панель поиска, которую можно использовать для поиска в любой из ячеек и возврата соответствующих данных в пользовательский интерфейс. Это та часть, с которой я застрял, и я надеялся, что кто-нибудь может дать мне некоторое руководство.
function doGet(e){
var ss = SpreadsheetApp.openById('12vq2W5Hm6rl8v_HBzHHOLHvZ5HW7fn892u_JHjEJ-oY');
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],
"otherphone" : values[x][7],
"email" : values[x][8],
"fax" : values[x][9],
"postaladdress" : values[x][10]});
}
HTMLTemp.data = holderArray;
var html = HTMLTemp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function myFunction1(){
var ss = SpreadsheetApp.openById('12vq2W5Hm6rl8v_HBzHHOLHvZ5HW7fn892u_JHjEJ-oY');
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],
"otherphone" : values[x][7],
"email" : values[x][8],
"fax" : values[x][9],
"postaladdress" : values[x][10]});
}
HTMLTemp.data = holderArray;
var html = HTMLTemp.evaluate().setWidth(1020).setHeight(800);
SpreadsheetApp.getUi().showModalDialog(html, 'Age UK Essex Staff
Directory');
}