Попытка получить данные из Google Sheets с использованием скрипта Google и отображение на веб-странице с горизонтальной вкладкой - PullRequest
Новая
       6

Попытка получить данные из Google Sheets с использованием скрипта Google и отображение на веб-странице с горизонтальной вкладкой

0 голосов
/ 18 января 2019

Я пытаюсь получить данные на основе названия офиса из Google Sheet и отобразить на странице HTML, где название офиса выбирается с помощью горизонтальной вкладки.

HTML-код отображается нормально, но данные не выбираются. Я не могу точно определить проблему. Я впервые использую скрипты Google и веб-разработку. 

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

  function fetchRushIv(officeName){
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
 var currSheet = spreadSheet.getSheetByName('OG_Database');
 currSheet.activate();

  var table;
     var data = currSheet.getRange(5, 1, currSheet.getLastRow(), 
 currSheet.getLastColumn()).getValues();

  table = "<table id='Rush IV' border='1' style = 'width:100%' 
  padding:10px>";
  for(var i=1;i<data.length;i++){
   var compar=data[i][0];
   if(compar=="Office Name" || compar===officeName){
         table+='<tr>';
      for(var j=0;j<data[1].length;j++){
      table += "<td>"+data[i][j]+"</td>";
       }
      table += "</tr>";
       }
       else{
        return 0;
        }

       }
       table += "</table>"

      return table ;
       }

Это HTML-код: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <base target="_top" />
    <script>
      src = "main.js";
    </script>
    <style>
      body {
        font-family: Arial;
      }

      /* Style the tab */
      .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

      /* Style the buttons inside the tab */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }

      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #ccc;
      }

      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
      }

      /* Fade in tabs */
      @-webkit-keyframes fadeEffect {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes fadeEffect {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      /*style the header*/
      header {
        background-color: #008080;
        padding: 30px;
        text-align: center;
        font-size: 35px;
        color: white;
      }

      /*define the second column containing the data area.*/
      dataArea {
        float: left;
        background-color: #fff8dc;
        width: 80%;
        padding: 20px;
        color: #000;
      }

      /*style the footer*/
      footer {
        float: left;
        width: 100%;
        background-color: #008080;
        padding: 15px;
        text-align: center;
        color: white;
      }

      /*Add responsive layout for the compensation of using on smaller 
screens,i.e.,
     *the two columns will stack up on each other in smaller sized screens.
     */
      @media (max-width: 600px) {
        nav,
        dataArea {
          width: 100%;
          height: auto;
        }
      }
    </style>
    <script>
      google.script.run
        .withFailureHandler(failed)
        .withSuccessHandler(displayData)
        .fetchRushIv();

      function getData(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
      }

      function displayData(table) {
        document.getElementById("customers").innerHTML = table;
      }
      function failed(e) {
        alert("error=" + e);
      }
    </script>
  </head>
  <body>
    <header><h4>Sample Data Fetching</h4></header>
    <div class="tab">
      <button
        class="tablinks"
        onclick="getData(event,'Beaumont') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Beaumont')"
      >
        Beaumont
      </button>
      <button
        class="tablinks"
        onclick="getData(event,'Crosby') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Crosby')"
      >
        Crosby
      </button>
      <button
        class="tablinks"
        onclick="getData(event,'Splendora') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Splendora')"
      >
        Splendora
      </button>
    </div>
    <div id="content " class="tabcontent">
      <h3>The data Table for the Selected Office</h3>
      <table id="customers" style="width: 100%;"></table>
    </div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Хорошо, ребята, проблема, связанная с невозможностью отображения, была решена, и вот код. 

function fetchRushIv(officeName){
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  var currSheet = spreadSheet.getSheetByName('OG_Database');
  currSheet.activate();
    var data = currSheet.getRange(5, 1, currSheet.getLastRow(), 
currSheet.getLastColumn()).getValues();

 var html="<style>th,td{border:1px solid #000;padding:5px;}</style> 
 <table>";;
  for(var i=0;i<data.length;i++){
       if(data[i][0]=="Office Name" || data[i][0]==officeName){
         html+='<tr>';
      for(var j=0;j<data[1].length;j++){
      html += "<td>"+data[i][j]+"</td>";
      }
      html+= "</tr>";
}

}
html += "</table>"

  return html ;
}

HTML-часть с исправленной ошибкой выглядит следующим образом: 

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
   google.script.run.withFailureHandler(failed).
withSuccessHandler(displayData).fetchRushIv(cityName);
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";

 } 

function displayData(table){
document.getElementById('customers').innerHTML=table;
}

function failed(e){
alert("error:"+e);
}
</script>
0 голосов
/ 19 января 2019

Попробуйте эту функцию: 

function fetchRushIv(officeName){
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('OG_Database');
  var data=sh.getRange(5,1,sh.getLastRow(),sh.getLastColumn()).getValues();
  var html="<style>th,td{border:1px solid #000;padding:5px;}</style><table>"; 
  for(var i=0;i<data.length;i++){
    if(data[i][0]=="Office Name" || data[i][0]==officeName){//I had trouble figuring out what you were doing here so this may be wrong
      html+='<tr>';
      for(var j=0;j<data[i].length;j++){
        html+="<td>"+data[i][j]+"</td>";
      }
      html+="</tr>";
    }
  }
  html+="</table>";
  return html;
}

Это намного более простая версия вашего HTML.Сначала включите это, и вы можете добавить остальные стили позже. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function(){//this will run as soon as your DOM loads and that should load your table
      google.script.run
      .withSuccessHandler(function(hl){
         document.getElementById('customers').innerHTML=hl;
       })
      .fetchRushIv();

    }) 
   console.log('MyCode');
   </script>
 </head>
  <body>
  <div id="customers"></div> 
</body>
</html>

Вам все равно придется тестировать и отлаживать, но я думаю, что это немного ближе к работе.Я надеюсь, что вы знаете, как использовать console.log для отладки кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...