【发布时间】：2020-07-21 09:35:50
【问题描述】：
我有一个包含大约 600 行数据的 Google 表格。我希望能够将此电子表格显示和过滤为 HTML 表格，并将其显示到 Google 站点。我在网上找到了这段代码以及我使用的“显示”HTML。
但是，当我作为 Web 应用程序发布时，我只能看到表格的轮廓，而行中没有数据。我的表格轮廓看起来正确并包含我需要的搜索过滤器，但是表格中没有出现任何数据。
下面的代码有问题吗？
function myFunction() {
}function doGet(e){
var SHEET_ID=e.parameter.sheet_id
var html=HtmlService.createTemplateFromFile('Display')
var ss=SpreadsheetApp.openById('My Google Sheet ID')
var sheet=ss.getSheetByName('Sheet2')
html.data=getRowsData(sheet,sheet.getDataRange(),1)
return html.evaluate().setTitle('Log')
Logger.log(getRowsData(sheet,sheet.getDataRange(),1))
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
function getRowsData(sheet, range, columnHeadersRowIndex){
columnHeadersRowIndex = columnHeadersRowIndex || range.getRowIndex()-1;
var numColumns = range.getEndColumn() - range.getColumn() + 1;
var headersRange = sheet.getRange(columnHeadersRowIndex, range.getColumn(), 1,
numColumns);
var headers = headersRange.getValues()[0];
return getObjects(range.getValues(),normalizeHeaders(headers));
}
function getObjects(data, keys) {
var objects = [];
for (var i = 0; i < data.length; ++i) {
var object = {};
var hasData = false;
for (var j = 0; j < data[i].length; ++j) {
var cellData = data[i][j];
if (isCellEmpty(cellData)) {
continue;
}
object[keys[j]] = cellData;
hasData = true;
}
if (hasData) {
objects.push(object);
}
}
return objects;
}
function normalizeHeaders(headers) {
var keys = [];
for (var i = 0; i < headers.length; ++i) {
var key = normalizeHeader(headers[i]);
if (key.length > 0) {
keys.push(key);
}
}
return keys;
}
function normalizeHeader(header) {
var key ='';
var upperCase = false;
for (var i = 0; i < header.length; ++i) {
var letter = header[i];
if (letter == '' && key.length > 0) {
upperCase = true;
continue;
}
if (!isAlnum(letter)) {
continue;
}
if (key.length == 0 && isDigit(letter)) {
continue; // first character must be a letter
}
if (upperCase) {
upperCase = false;
key += letter.toUpperCase();
} else {
key += letter.toLowerCase();
}
}
return key;
}
function isAlnum(char) {
return char >= 'A' && char <= 'Z' ||
char >= 'a' && char <= 'z' ||
isDigit(char);
}
function isDigit(char) {
return char >= '0' && char <= '9';
}
function isCellEmpty(cellData) {
return typeof(cellData) == 'string' && cellData == '';
}
显示.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!=include('Style')?>
</head>
<body>
<p></p>
<table id="dataTable" border="1" cellpadding="2" cellspacing="0">
<th width="10%">Employee Number</th>
<th width="15%">Name</th>
<th width="15%">Surname</th>
<th width="15%">EmpNo</th>
<th width="10%">Title</th>
<th width="15%">Div</th>
<th width="10%">Office</th>
<th width="10%">Form</th>
<tr>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="EmployeeNumberSearchBox" onkeyup="SearchFunc()"
placeholder="EmployeeNumber..." width="30"></td>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="NameSearchBox"
onkeyup="SearchFunc()" placeholder="Name..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="SurnameSearchBox"
onkeyup="SearchFunc()" placeholder="Surname..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="EmpNoSearchBox"
onkeyup="SearchFunc()" placeholder="EmpNo..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="TitleSearchBox"
onkeyup="SearchFunc()" placeholder="Title..." width="35"></td>
<td bgcolor="#eb8c00" align="center">
<select id="Div" onchange="SearchFunc();">
<option value="">Div...</option>
<option value="DOO">DOO</option>
<option value="PIT">PIT</option>
<option value="FID">FID</option>
<option value="FIS">FIS</option>
<option value="General">General</option>
<option value="Other">Other</option>
<option value="IS">IS</option>
<option value="SAS">SAS</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center">
<select id="Office" onchange="SearchFunc();">
<option value="">Office...</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Berlin">Berlin</option>
<option value="Eindhoven">Eindhoven</option>
<option value="Lille">Lille</option>
<option value="Vienna">Vienna</option>
<option value="Copenhagen">Copenhagen</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center"></td>
</tr>
<? for (var i=1;i<data.length;i++) {?>
<tr style="height:15px;">
<td align="center"><?=data[i]['Employee Number']?> </td>
<td align="left"><?=data[i]['Div']?> </td>
<td align="center"><?=data[i]['EmpNo']?> </td>
<td align="center"><?=data[i]['Name']?> </td>
<td align="center"><?=data[i]['Surname']?> </td>
<td align="center"><?=data[i]['Title']?> </td>
<td align="center"><?=data[i]['Office']?> </td>
<td align="center">
<a href="<?=data[i]['=ARRAYFORMULA(HYPERLINK(K1:K616, "Click here to complete
Access Form"))']?>" target="_blank"><button>Open Form</button>
</a>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
样式.Html
<style>
input[type=text] {
font-size: 12px; /* Increase font-size */
padding: 12px 12px 12px 12px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 3px; /* Add some space below the input */
margin-top: 2px;
}
#EmployeeNumberSearchBox, #EmpNoSearchBox, #NameSearchBox,
#SurnameSearchBox, #OfficeSearchBox, #TitleSearchBox {
text-align:center;
width:50%;
}
#DivSearchBox{
text-align:center;
width:85%;
}
#dataTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 14px; /* Increase font-size */
table-layout: fixed;
}
#dataTable th{
text-align: center; /* Centre-align text */
background-color: #d04a02;
color: #ffffff
}
#dataTable td {
padding: 3px 5px 2px 10px;
}
#dataTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
button {
background-color: #464646;
border:none;
padding: 3px 5px 2px;
text-align: center;
display: inline-block;
font-size: 14px;
font-family: Helvetica Neue;
font-style: Bold;
color: white;
}
button:hover {
background-color: #eb8c00; /* Green */
color: white;
cursor:pointer;
}
select {
border: 0;
width: 100%;
height:35px;
text-align-last:center;
}
</style>
Java.html
<script>
function SearchFunc() {
var EmployeeNumberInput, DivInput, EmpNoInput, NameInput,
SurnameInput, OfficeInput, TitleInput,
EmployeeNumberFilter, DivFilter, EmpNoFilter, NameFilter,
SurnameFilter, OfficeFilter, TitleFilter,
table, tr, i,
EmployeeNumberValue, DivValue, EmpNoValue, NameValue,
SurnameValue, OfficeValue, TitleValue;
EmployeeNumberInput = document.getElementById("Employee Number");
DivInput = document.getElementById("Div");
EmpNoInput = document.getElementById("EmpNo");
NameInput = document.getElementById("Name");
SurnameInput = document.getElementById("Surname");
TitleInput = document.getElementById("Title");
OfficeInput = document.getElementById("Office");
EmployeeNumberFilter = EmployeeNumberInput.value.toUpperCase();
DivFilter = DivInput.value.toUpperCase();
EmpNoFilter = EmpNoInput.value.toUpperCase();
NameFilter = NameInput.value.toUpperCase();
SurnameFilter = SurnameInput.value.toUpperCase();
TitleFilter = TitleInput.value.toUpperCase();
OfficeFilter = OfficeInput.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 2; i < tr.length; i++) {
EmployeeNumberValue = tr[i].getElementsByTagName("td")[0];
DivValue = tr[i].getElementsByTagName("td")[1];
EmpNoValue = tr[i].getElementsByTagName("td")[2];
NameValue = tr[i].getElementsByTagName("td")[3];
SurnameValue = tr[i].getElementsByTagName("td")[4];
TitleValue = tr[i].getElementsByTagName("td")[5];
OfficeValue = tr[i].getElementsByTagName("td")[6];
if (EmployeeNumberValue) {
if (EmployeeNumberValue.textContent.toUpperCase().indexOf
(EmployeeNumberFilter) > -1
&&
DivValue.textContent.toUpperCase().indexOf(DivFilter) > -1
&&
EmpNoValue.textContent.toUpperCase().indexOf(EmpNoFilter) > -1
&&
NameValue.textContent.toUpperCase().indexOf(NameFilter) >
-1
&&
SurnameValue.textContent.toUpperCase().indexOf(SurnameFilter) > -1
&&
TitleValue.textContent.toUpperCase().indexOf(TitleFilter) > -1)
&&
OfficeValue.textContent.toUpperCase().indexOf(OfficeFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("dataTable");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 2; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Check if the two rows should switch place:
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
【问题讨论】：
标签： google-apps-script google-sheets google-sites