在不重新加載頁面的情況下更新 HTML 中的小腳本

Question

我指的是這篇關於模板化 HTML 和帶有 Google Apps 腳本的小腳本的文章：https://developers.google.com/apps-script/guides/html/templates

寫了如何在加載 html 頁面時調用 Apps Script function 並加載數據：

代碼.gs：

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

function getData() {
  return SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

問題：是否可以在不刷新整個頁面的情況下更新 scriptlet？ 例如要實現一個按鈕並調用getData() function 將新數據從電子表格加載到 html？

更新：

我用一個簡單的按鈕和一個代碼調整了代碼以再次調用getData() function 並更新表格。 但是當然這樣做會使 for 循環丟失。 更好的是重新加載整個代碼。 有沒有辦法重新評估整個頁面？ 有任何想法嗎？

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button type="button" onclick="Refresh()">Refresh</button>
    <? var data = getData(); ?>
    <table id="datatable">
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>

<script>

  function Refresh(){
    google.script.run.withSuccessHandler(update).withUserObject(this).getData();
  }      
            
  function update(returnValue){
    document.getElementById("datatable").innerHTML= returnValue
  }

</script>

</html>

Answer 1

如果您將從客戶端調用getData() ，那么您將需要在客戶端構建表。 更簡單的方法可能是創建一個字符串，然后通過使用HtmlElement.outerHTML替換整個元素或使用HtmlElement.innerHTML替換內部元素和內容來添加它。

客戶端 JavaScript 代碼（放在<script>標簽之間，不需要更改您的服務器端代碼）

function refreshTable(){
  google.script.run
    .withSuccessHandler(updateTable)
    .withFailureHandler((error) => console.error(error.message))
    .getData()

}

function updateTable(data){
  let html = '';
  for (var i = 0; i < data.length; i++) {
    html += `<tr>`;
      for (var j = 0; j < data[i].length; j++) {
        html += `<td>${data[i][j]}</td>`;
      } 
    html += `</tr>`;
  }
  document.getElementById("datatable").innerHTML = html;
}

By the other hand, if you want to use Google Apps Script templated HTML to build the HTML table, then you need to call a function that evaluates the template to generate a HttpOutput object and then use HttpOutput.getContent() to return a string to客戶端代碼，那么您可以使用HtmlElement.innerHTML將此字符串傳遞給相應的元素。

服務器端，在 a.gs 文件中

function includeFromTemplate(filename){
  return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}
Server side, table.html file

<? var data = getData(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  <tr>
    <? for (var j = 0; j < data[i].length; j++) { ?>
      <td><?= data[i][j] ?></td>
    <? } ?>
  </tr>
<? } ?>

客戶端。 從 onclick 屬性調用此 function 或使用HtmlElement.addEventlistener方法。

function refreshTable(){
  google.script.run
  .withSuccessHandler(html => {
    document.querySelector('table').innerHTML = html;
  })
  .withFailureHandler((error) => console.error(error.message))
  .includeFromTemplate('table')
}

在不重新加載頁面的情況下更新 HTML 中的小腳本

問題描述

1 個解決方案

解決方案1
0 2022-09-22 14:35:16

在不重新加載頁面的情況下更新 HTML 中的小腳本

問題描述

1 個解決方案

解決方案1 0 2022-09-22 14:35:16

解決方案1
0 2022-09-22 14:35:16