时间戳

首页 > 解决方案 > 需要将 HTML 值从 Google 表格导入到 Google WebApp

javascript - 需要将 HTML 值从 Google 表格导入到 Google WebApp

问题描述

我正在通过 Google webapp 处理 Search crud，我想通过从 Google 表格单元格中获取 HTML 设计在前端显示它。在屏幕截图中显示一些示例

Google 表格单元格包含 HTML 代码 在此处输入图像描述

前端不显示来自 Google 表格的 HTML 设计，而是显示带有 HTML 代码的数据。 在此处输入图像描述

这是我的脚本代码

main.html

</head>
  <body>
    
    <div class="container">
   
     <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 l1Column = tr.querySelector(".L1");
var l2Column = tr.querySelector(".L2");
var l3Column = tr.querySelector(".L3");
var l4Column = tr.querySelector(".L4");
var l5Column = tr.querySelector(".L5");
var l6Column = tr.querySelector(".L6");
var l7Column = tr.querySelector(".L7");
var l8Column = tr.querySelector(".L8");

l1Column.textContent = r[0];
l2Column.textContent = r[1];
l3Column.textContent = r[2];
l4Column.textContent = r[3];
l5Column.textContent = r[4];
l6Column.textContent = r[5];
l7Column.textContent = r[6];
l8Column.textContent = r[7];

searchResultsBox.appendChild(tr);

});
}

function loadSearchView(){
loadView({func:"loadSearchView", callback: setDataForSearch});
}


window.addEventListener("load", loadSearchView);


function inputEventHandler(e){
if (e.target.matches("#searchinput")){
  search();
}
}
document.getElementById("app").addEventListener("input",inputEventHandler);
    
    </script>
    
  </body>
</html>

搜索.html

<div class="form-group">  
    <input type="text" class="form-control" id="searchinput" placeholder="search...">
 </div>

 

<table class="table table-hover">
  <thead>
    <tr>
      
      <th scope="col">Id</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Phone Number</th>
      <th scope="col">Code</th>
      <th scope="col">Country</th>
      <th scope="col">City</th>
      <th scope="col">Street</th>

    </tr>
  </thead>
  <tbody id="searchResults">
  
  </tbody>
</table>


<template id="rowTemplate">
 <tr>
      
      <td class="L1"></td>
      <td class="L2"></td>
      <td class="L3"></td>
      <td class="L4"></td>
      <td class="L5"></td>
      <td class="L6"></td>
      <td class="L7"></td>
      <td class="L8"></td>

  </tr>
</template>

服务器端函数.gs

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

}

加载部分.gs

function loadPartialHTML_(partial) {
  const htmlServ = HtmlService.createTemplateFromFile(partial);
  return htmlServ.evaluate().getContent();
  
}

function loadSearchView(){
 
   return loadPartialHTML_("search");
}

我希望我上面的帖子很清楚。

标签： javascriptgoogle-apps-scriptgoogle-sheets

解决方案

search()下面对Javascript 端的函数进行修改怎么样？

从：

l1Column.textContent = r[0];
l2Column.textContent = r[1];
l3Column.textContent = r[2];
l4Column.textContent = r[3];
l5Column.textContent = r[4];
l6Column.textContent = r[5];
l7Column.textContent = r[6];
l8Column.textContent = r[7];

到：

l1Column.innerHTML = r[0];
l2Column.innerHTML = r[1];
l3Column.innerHTML = r[2];
l4Column.innerHTML = r[3];
l5Column.innerHTML = r[4];
l6Column.innerHTML = r[5];
l7Column.innerHTML = r[6];
l8Column.innerHTML = r[7];

参考：

推荐阅读