Question

我正在开发一个简单的“基于查询”的Web应用程序，该应用程序将从多人使用的工作表中检索某些数据。使用此应用的人永远都不会看到完整的电子表格文件。

GAS代码：

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

function getData(e) {
  var id = "1ui99w7eNFwRz_ck66eXH503IyhxYQVNR96HW4HusJCI";
  var data =         SpreadsheetApp.openById(id).getSheetByName("Requests").getDataRange().getValues();
  var ar = [];
  data.forEach(function(f) {
    if (~f.indexOf(e.searchtext)) {
      ar.push(f);}});
  return ar
Logger.log(ar)
}

HTML文件：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <form>
    <input type="text" name="searchtext">
    <input type="button" value="ok" onClick="getData(this.parentNode)" />
    </form>
    <pre id="disp"></pre>

    <html>
      <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Key');
        data.addColumn('string', 'Booking Key');
        data.addColumn('boolean', 'WHS Accepted');
        data.addColumn('string', 'Booking Date');
        data.addColumn('string', 'Booking Time');
        data.addColumn('string', 'Loading');
        data.addColumn('string', 'Supplier');
        data.addColumn('string', 'Suppliers');
        data.addColumn('string', 'Dock');
        data.addColumn('string', 'Driver name');
        data.addColumn('string', 'Plate No.1');
        data.addColumn('string', 'Plate No. 2');
        data.addColumn('string', 'Truck Type');
        data.addColumn('string', 'Pallet places');
        data.addColumn('string', 'Note');
        data.addColumn('boolean', 'Canceled ');

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

到目前为止，我已经知道了：

网站标题：https://imgur.com/Tk6MrV0

我在App中输入了某些代码，代码以数组的形式检索了我的数据，但是我在用数据填充表方面很挣扎。

任何帮助将不胜感激。

Answer 1

使用foo();从服务器加载数据
直接将接收到的数组添加到可视化中

HTML

google.script.run

code.gs代码段：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      const loaded = new Promise((res, rej) => {
        google.charts.load('current');
        google.charts.setOnLoadCallback(res);
      });
      let wrapper = null;

      async function drawTable(arr) {
        await loaded; //wait if charts is not loaded
        wrapper = new google.visualization.ChartWrapper({
          chartType: 'Table',
          dataTable: arr,
          containerId: 'table_div',
        });
        wrapper.draw();
      }

      function getData(form) {
        google.script.run
          .withSuccessHandler(drawTable)
          .getDataFromServer(form);//change server function name
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" name="searchtext" />
      <input type="button" value="ok" onclick="getData(this.parentNode)" />
    </form>
    <div id="table_div"></div>
  </body>
</html>

从电子表格数据填充HTML表

1 个答案:

HTML

code.gs代码段：

阅读：