我正在尝试在Google脚本HTML网络应用中创建一个信息中心，数据包含，分配的项目以及用户在项目上花费的总时间
我已经使用了一些HTML代码，但它有混乱，共享谷歌表格，其中包含我希望在网络应用程序中复制此数据的数据。我在这里看到的功能是＆＃34;日期选择器＆＃34; ＆＃34;用户名/项目名称＆＃34;是搜索参数
仪表板应根据搜索参数进行反映，数据应包括用户的总工作用户数或用户在项目上花费的总时数或用户数。
我知道它有点复杂，如果你参考我的表单，你会知道我想在网络应用程序中发布什么
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet4')
.getDataRange()
.getValues();
}
function getData1() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet5')
.getDataRange()
.getValues();
}
function getData2() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet6')
.getDataRange()
.getValues();
}
function getData3() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet7')
.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>
<style>
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
min-height: 200px;
}
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="row">
<div class="col-xs-3"><label for="usr"><p class="text-primary">User Name</label><input type="text" class="form-control" id="#"></div>
<div class="col-xs-3"><label for="usr"><p class="text-primary">Date Range Picker</label><input type="text" class="form-control" id="#"></div>
</div>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="col-sm-6">
<div class="well">
<p><html>
<? var data = getData(); ?>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<p>Today Report</p>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</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>
</html></p>
</div>
<div class="well">
<table class="table table-bordered">
<thead>
<tr>
<td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>A</td>
<td>12:00:00</td>
</tr>
<tr>
<td>Test2</td>
<td>B</td>
<td>11:00:00</td>
</tr>
<tr>
<td>Test3</td>
<td>C</td>
<td>10:00:00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<p><html>
<? var data = getData1(); ?>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<p>Monthly Report</p>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</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>
</html></p>
</div>
<div class="well">
<table class="table table-bordered">
<thead>
<tr>
<td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>A</td>
<td>122:00:00</td>
</tr>
<tr>
<td>Test2</td>
<td>B</td>
<td>211:00:00</td>
</tr>
<tr>
<td>Test3</td>
<td>C</td>
<td>190:00:00</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
答案 0 :(得分：1)
这是一个简单的html文件，与电子表格中包含的Google Apps脚本进行通信。我作为一个对话框测试了很多，我也将它作为一个Web应用程序运行。 html文件和Google Apps脚本相互通信，我将一个数组从html文件传递到Google Script。希望这会有所帮助。
Code.gs文件：
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "M/d/yyyy' 'HH:mm:ss");
a.splice(0,0,ts);
var ss=SpreadsheetApp.openById('SPREADSHEETID')
ss.getSheetByName('Form Responses 1').appendRow(a);
return true;
}
function getURL()
{
var ss=SpreadsheetApp.openById('SPREADSHEETID');
var sht=ss.getSheetByName('imgURLs');
var rng=sht.getDataRange();
var rngA=rng.getValues();
var urlA=[];
for(var i=1;i<rngA.length;i++)
{
urlA.push(rngA[i][0]);
}
return urlA;
}
index.html文件：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data">
<br />Text 1<input name="t1" type="text" size="15" id="txt1" placeholder="Text 1" />
<br />Text 2<input name="t2" type="text" size="15" id="txt2" placeholder="Text 2" />
<br />Text 3<input name="t3" type="text" size="15" id="txt3" placeholder="Text 3" />
<br />Text 4<input name="t4" type="text" size="15" id="txt4" placeholder="Text 4" />
<br /><input type="radio" name="Type" value="Member" checked />Member
<br /><input type="radio" name="Type" value="Guest" />Guest
<br /><input type="radio" name="Type" value="Intruder" />Intruder
<br /><input type="button" value="submit" id="btn1" />
<br /><img id="img1" src="" alt="img1" width="300" />
</div>
<div id="resp" style="display:none;">
<h1>Response</h1>
<p>Your data has been received.</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click(validate);
$('#txt4').val('');
$('#txt3').val('');
$('#txt2').val('');
$('#txt1').val('')
google.script.run
.withSuccessHandler(setURL)
.getURL();
});
function setURL(url)
{
$('#img1').attr('src',url[0]);
}
function setResponse(a)
{
if(a)
{
$('#data').css('display','none');
$('#resp').css('display','block');
}
}
function validate()
{
var txt1 = document.getElementById('txt1').value || '';
var txt2 = document.getElementById('txt2').value || '';
var txt3 = document.getElementById('txt3').value || '';
var txt4 = document.getElementById('txt4').value || '';
var type = $('input[name="Type"]:checked').val();
var a = [txt1,txt2,txt3,txt4,type];
if(txt1 && txt2 && txt3 && txt4)
{
google.script.run
.withSuccessHandler(setResponse)
.getData(a);
return true;
}
else
{
alert('All fields must be completed.');
}
}
function loadTxt(from,to)
{
document.getElementById(to).value = document.getElementById(from).value;
}
function radioValue()
{
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++)
{
if(radios[i].checked)
{
return radios[i].value;
}
}
}
console.log('My Code');
</script>
</body>
</html>