如何将Google Sheets表格中的数据提取到动态html表格

问题描述 投票：0回答：1

我有一个像这样的应用程序脚本网络应用程序，它只是将数据从 Google Sheets 显示到 html 页面，并带有动态 html 表。

在 code.gs 中我只有这个：

function doGet(request) {
  return HtmlService.createTemplateFromFile('index').evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
 
//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData(){
  var spreadSheetId = "id";
  var dataRange     = "webapp_1!A2:F";
 
  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
  var values  = range.values;
 
  return values;
}
 
//INCLUDE JAVASCRIPT AND CSS FILES
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

在index.html中我有这个：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
 
    <?!= include('JavaScript'); ?> <!--INCLUDE JavaScript.html FILE-->
  </head>
 
  <body>
    <div class="container">
      <br>
      <div class="row">
        <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
          <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
        </table>
      </div>
    </div>  
  </body>
</html>

在 JavaScript.html 中我有这个：

<script>
  /*
  *THIS FUNCTION CALLS THE getData() FUNCTION IN THE Code.gs FILE, 
  *AND PASS RETURNED DATA TO showData() FUNCTION
  */
  google.script.run.withSuccessHandler(showData).getData();
 
  //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
        columns: [
         {"title":"Description du document"},
         {"title":"Lien",
          "render": function(data, type, row, meta){
          if(type === 'display'){
          data = '<a href="' + data + '" target="blank">' + 'clic !' + '</a>';}
          return data;}},
         {"title":"Date création"},
         {"title":"Catégorie"},
         {"title":"Type document"},
         {"title":"Type fichier(s) / appli"}
        ]
      });
    });
  }
</script>

（在此页面上找到了这一切。）

这在 Google Apps 脚本上运行良好。

但是因为我想在我自己网站的随机网页上获得相同的结果，而不是在 Google Apps 脚本页面上获得相同的结果，所以我尝试将其全部混合在一个 html 文件中，如下所示：

<!DOCTYPE html>

<html>

  <head>

    <base target="_top">
    <!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
 
  </head>
 
  <body>

    <div class="container">
      <br>
      <div class="row">
        <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
          <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
        </table>
      </div>
    </div>

    <script>


      function getData(){
        var spreadSheetId = "id";
        var dataRange     = "webapp_1!A2:F";
       
        var range   = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
        var values  = range.values;
       
        return values;
      }
     
      //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
      function showData(dataArray){
        $(document).ready(function(){
          $('#data-table').DataTable({
            data: dataArray,
            //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
            columns: [
             {"title":"Description du document"},
             {"title":"Lien",
              "render": function(data, type, row, meta){
              if(type === 'display'){
              data = '<a href="' + data + '" target="blank">' + 'clic !' + '</a>';}
              return data;}},
             {"title":"Date création"},
             {"title":"Catégorie"},
             {"title":"Type document"},
             {"title":"Type fichier(s) / appli"}
            ]
          });
        });
      }

      
      google.script.run.withSuccessHandler(showData).getData();

    </script>

  </body>

</html>

然后我将文件放在我的 ftp 上，获取了 url 等...但这根本不起作用。我想某些函数是特定的 Apps 脚本函数，我无法在其他地方使用？ （也许 google.script.run 等？）您会建议其他一些方法来使其工作吗？

谢谢！

javascript jquery google-apps-script datatables
1个回答
0
投票

您可以使用像这样的模板化 html，并让函数只返回一个二维数组，就像 getValues() 的返回一样；

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
    <div id="tabledata">
       <? var vs = myFunck1(); ?>
       <table>
         <? vs.forEach((r,i)=>{ ?>
           <tr>
           <? r.forEach((c,j)=>{ ?>
             <? if(i == 0) { ?>
            <th style="padding:2px 5px;font-weight:bold;border:1px solid black;"><?= c ?> </th>           
           <? } else { ?>
             <td style="padding:2px 5px;border:1px solid black;"><?= vs[i][j] ?> </td>
           <? } ?>
         <?  }); ?>
           </tr>
         <? }); ?>
       </table>
     </div> 
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.