Javascript 需要将HTML值从Google工作表导入Google WebApp_Javascript_Google Apps Script_Google Sheets

Javascript 需要将HTML值从Google工作表导入Google WebApp

javascript google-apps-script google-sheets

Javascript 需要将HTML值从Google工作表导入Google WebApp,javascript,google-apps-script,google-sheets,Javascript,Google Apps Script,Google Sheets,我正在通过GoogleWebApp处理搜索crud，我想通过从GoogleSheets单元格获取HTML设计来显示前端。在屏幕截图中显示一些示例 GoogleSheet单元格包含HTML代码前端不显示Google表单中的HTML设计，而是用HTML代码显示数据。这是我的脚本代码 main.html </head> <body> <div class="container"> <div i

我正在通过GoogleWebApp处理搜索crud，我想通过从GoogleSheets单元格获取HTML设计来显示前端。在屏幕截图中显示一些示例

GoogleSheet单元格包含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>

loadpartials.gs

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

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

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

下面对Javascript端的

search（）函数的修改如何
发件人：
致：
参考：


@Muhammed Aadhil感谢您的回复和测试。我很高兴你的问题解决了。也谢谢你。我有一个小问题，当我点击印度的链接时，它打开了这个url，但无法打开它。有什么原因吗？@Muhammed Aadhil关于你的新问题，我愿意支持你。但不幸的是，我不能理解你的新问题。这是因为我的技术差。对此我深表歉意。因此，在这种情况下，我想建议将其作为新问题发布。我深表歉意，我不能很快解决你的问题，因为我的技能差。我想多学习一些。当然，我会的谢谢你的支持。“非常感谢。”穆罕默德·阿德希尔感谢您的回复。我真的很抱歉，我不能很快解决你的新问题。
function getDataForSearch(){
    
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("customer");
  
  return ws.getRange(2, 1, ws.getLastRow(),8).getValues();

}

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

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

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];