Home / Questions / 99483
Accepted
Juan Rafael
Asked: 2020-09-03 21:57:21 +0800 CST 2020-09-03 21:57:21 +0800 CST

执行 Google Apps 脚本的按钮

  • 772

我有一个脚本，它从电子表格中读取信息，并以 HTML 格式显示。我尝试调整一个按钮，以在电子表格中进行更改时激活信息更新。我只设法执行window.location.reload(true);. 但是数据没有更新。

这些是代码：

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

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

function onSubmit(e){

  doGet();
  getData();
}

<!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>

    // no es del código original. Aquí trato de incluir el botón
     <form>
    <input onclick="MostrarResultados()" type="button" value="Mostrar" />
    </form>
    <script type="text/javascript">
    function MostrarResultados() {
    google.script.run.onSubmit();
    window.location.reload(true);
    }
    </script>
    // hasta aquí la parte que inserto, no es del código original
 </body>
</html>
aplicación-web

1 Answers

  1. Best Answer

    代码有几个问题。

    1. google.script.run.onSubmit();在客户端，它调用服务器端函数，但没有等待服务器响应的“回调”函数。
    2. onSubmit(e)在服务器端调用doGet(e)，但这是一个保留通过应用程序的 URL 调用的函数。
    3. window.location.reload(true);作为Erick Koleda 2013 年关于使用此代码的问题的回应，HTMLService 限制了对 window 对象的访问。我不完全确定它在使用时会产生怎样的影响HtmlService.SandboxMode.IFRAME。为了达到同样的效果，我使用了我在下一点中描述的另一种方法。
    4. 考虑到在最佳实践文档（英文）中指出不要使用模板来获取数据，这是 OP 的代码所做的，而是异步获取它们，下面是一个从电子表格获取数据的 Web 应用程序示例并通过单击按钮对其进行更新。

    网络应用示例

    window.onload加载 Web 应用程序时，通过调用该函数来加载数据，该函数actualizarTabla()又调用google.script.runusing withSuccessHandler，这样一旦服务器以 HTML 表格格式响应电子表格数据，该数据就会传递给我们想要的页面元素向他们展示。为了更新数据，按钮调用相同的函数。

    代码.gs

    /*
 * Devuelve página web.
 */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
/*
 * Obtiene los datos de la hoja de cálculo especificada por ID.
 */
function getData() {
  return SpreadsheetApp
      .openById('IdDeLaHojaDeCalculo')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}
/*
 * Convierte los datos en una tabla HTML
 */
function crearTabla(){
  var data = getData();
  var tabla = '<table>\n';
  for(var i = 0; i < data.length; i++){
    tabla += '<tr>';
    for(var j = 0; j < data[0].length; j++){
      tabla += '<td>' + data[i][j] + '</td>'
    }
    tabla += '</tr>\n';
  }
  tabla += '</table>';
  return tabla;
}

    索引.html

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript">
    window.onload = actualizarTabla();

    function actualizarTabla(){
      google.script.run
        .withSuccessHandler(mostrarTabla)
        .crearTabla();
    }
    function mostrarTabla(tabla){
      document.getElementById("tabla").innerHTML = tabla;
    }
    </script>

  </head>
  <body>
    <button onclick="actualizarTabla();">Actualizar</button>
    <div id="tabla">Cargando...</div>
  </body>
</html>

    参考：

    • 2