如何在页面加载时显示数据

Question

我一直在通过观看 YouTube 教程使用 Google WebApp 脚本进行搜索 CRUD，我快完成了，但我被困在一个我无法弄清楚如何排序的地方问题。

我想在第一页加载时加载搜索字段和数据。但基于此代码，我需要单击“搜索”选项卡，然后获取搜索字段以查找数据。如何摆脱搜索选项卡并直接进入搜索栏和数据。

页面加载时

第二次出现（点击后）

我的代码

<!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"id="search-link">Search</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.toString().toLowerCase().trim();
var searchWords = searchinput.split(/\s+/);
var searchColumns = [0,1,2,3,4,5,6,7];

// and or

var resultsArray = data.filter(function(r){

return searchWords.every(function(word){
return searchColumns.some(function(colIndex){
return r[colIndex].toString().toLowerCase().indexOf(word) !== -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>

服务器端代码

function getDataForSearch(){
    
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Array");
  
  return ws.getRange(2, 1, ws.getLastRow(),8).getValues();

}

我需要输入字母才能显示数据。屏幕截图 3

Answer 1

问题：

单击 Search tab 时当前正在执行一些操作。
您希望这些操作在页面加载时发生。

解决方案：

在您提供的 HTML 中，有一个 click 事件侦听器附加到您提到的 Search tab (id="search-link"):

document.getElementById("search-link").addEventListener("click",loadSearchView);

这意味着函数 loadSearchView 将在单击 Search tab 时执行。

如果我没理解错的话，您希望 loadSearchView 在页面加载时执行。在这种情况下，您可以只添加以下事件侦听器：

window.addEventListener("load", loadSearchView);

备注：

由于您没有提供服务器端代码，我不知道 loadSearchView 是否会按照您的意图进行。此解决方案仅确保在页面加载时执行 loadSearchView。
如果您想删除 Search tab，只需将其从 HTML（<div class="nav-link"id="search-link">Search</div> 及其容器元素）中删除即可。

参考：

Window: load event

如何在页面加载时显示数据

How Display The Data on Page Load

javascript

web-applications

google-apps-script

问题：

解决方案：

备注：

参考：