I am working on a simple app that will display search window and the results based on the range in google sheets. However I have a problem that I cannot understand at all.
The code is working perfect till I have 5 columns to display (search.html). If it is more than 5 it is not displaying anything....
I don't know how can I explain it more so if you have any question please let me know. Also console is not giving any error
I have no idea why. If anyone could help me with that I would be grateful.
CRUD.gs
function loadMainForm(){
const htmlServ = HtmlService.createTemplateFromFile("main");
const html = htmlServ.evaluate();
html.setWidth(950).setHeight(600)
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "データ検索");
}
function createMenu(){
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("データ検索");
menu.addItem("検索フォームを開く", "loadMainForm");
menu.addToUi();
}
function onOpen(){
createMenu();
}
main.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.nav-link {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<div class="nav-link active" id="home-link">Home</div>
</li>
<li class="nav-item">
<div class="nav-link"id="search-link">検索</div>
</li>
</ul>
<div id="app"></div>
<!-- Content here -->
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var data;
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById("app").innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function setDataForSearch(){
google.script.run.withSuccessHandler(function(dataReturned){
data = dataReturned.slice();
}).getDataForSearch();
}
function search(){
var searchinput = document.getElementById("searchinput").value;
var resultsArray = data.filter(function(r){
//return r[1].indexOf(searchinput) !== -1;
return r[0].toString().toLowerCase().indexOf(searchinput.toString().toLowerCase()) !== -1;
});
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
resultsArray.forEach(function(r){
var tr = template.cloneNode(true);
var hinmokuColumn = tr.querySelector(".hinmoku");
var buhinCodeuColumn = tr.querySelector(".buhinCode");
var buhinNameColumn = tr.querySelector(".buhinName");
var hitsuyoColumn = tr.querySelector(".hitsuyo");
var genkaColumn = tr.querySelector(".genka");
var kobaiColumn = tr.querySelector(".kobai");
var sagakuColumn = tr.querySelector(".sagaku");
var kenshoColumn = tr.querySelector(".kensho");
hinmokuColumn.textContent = r[0];
buhinCodeuColumn.textContent = r[1];
buhinNameColumn.textContent = r[2];
hitsuyoColumn.textContent = r[3];
genkaColumn.textContent = r[4];
kobaiColumn.textContent = r[5];
sagakuColumn.textContent = r[6];
kenshoColumn.textContent = r[7];
searchResultsBox.appendChild(tr);
});
}
function loadSearchView(){
loadView({func:"loadSearchView", callback: setDataForSearch});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
function inputEventHandler(e){
if (e.target.matches("#searchinput")){
search();
}
}
document.getElementById("app").addEventListener("input",inputEventHandler);
</script>
</body>
</html>
search.html
<h1>検索</h1>
<div class="form-group">
<input type="text" class="form-control" id="searchinput" placeholder="検索">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">品目</th>
<th scope="col">部品コード</th>
<th scope="col">部品名</th>
<th scope="col">必要数</th>
<th scope="col">原価</th>
<th scope="col">購買原価</th>
<th scope="col">差額1ヶ</th>
<th scope="col">検証状況</th>
</tr>
</thead>
<tbody id="searchResults">
</tbody>
</table>
<template id="rowTemplate">
<tr>
<td class="hinmoku"></td>
<td class="buhinCode"></td>
<td class="buhinName""></td>
<td class="hitsuyo"></td>
<td class="genka"></td>
<td class="kobai"></td>
<td class="sagaku"></td>
<td class="kensho"></td>
</tr>
</template>
loadPartial.gs
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView(){
return loadPartialHTML_("search");
}
serverSideFuncs.gs
function getDataForSearch(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Array");
return ws.getRange(2, 1, ws.getLastRow(),8).getValues();
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
