Последовательность / порядок выполнения функций скрипта в файле HTML - PullRequest
Новая
       10

Последовательность / порядок выполнения функций скрипта в файле HTML

1 голос
/ 01 августа 2020

Я пытаюсь создать таблицу с несколькими страницами, используя данные электронной таблицы следующим образом:

В code.gs я получаю данные из электронной таблицы следующим образом: 

function getData() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
var data = sheet.getRange(2, 1, sheet.getLastRow()-1, 3).getValues();
return data;
}

Затем в файле HTML указанные выше данные генерируются в таблице следующим образом: 

<table id="myTable">

<thead>
<tr class="header">
<th>First Name</th>
<th>Second Name</th>
<th>Third Name</th>
</tr>
</thead>

<tbody id="table-body">
</tbody>
        
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){ generateTableBody(data); });
google.script.run.withSuccessHandler(generateTableBody).getData();

function generateTableBody(dataArray) {
var table = document.getElementById("myTable");
var tbody = document.getElementById("table-body");

dataArray.forEach(function(r){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
var col2 = document.createElement("td");
col2.textContent = r[1];
var col3 = document.createElement("td");
col3.textContent = r[2];
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
tbody.appendChild(row);
});

}
</script>

Затем я добавил приведенный ниже сценарий в файл HTML, чтобы создать страницы. данных, при которых макс. 10 строк на каждой странице: 

<script>
$('#myTable').each(function() {

var currentPage = 0;
var numPerPage = 10;
var $table = $(this);

$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * (numPerPage-1)).show();
});

$table.trigger('repaginate');

var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');

for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}

$pager.insertBefore($table).find('span.page-number:first').addClass('active');

});
</script>

На данный момент у меня есть 2 проблемы:

эта часть $table.bind('repaginate', function() { $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * (numPerPage-1)).show();}); должна возвращать все строки под телом таблицы, скрыть все, затем срез, чтобы показать только первые 10 строк на первой странице, но это не работает (и я предполагаю, что, поскольку функция generateTableBody(dataArray) завершена после завершения функции запроса, и поэтому $table.find('tbody tr') сначала ничего не вернул, а затем generateTableBody(dataArray) вернул в интерфейс все строки, а не только первые 10 строк

Исходя из этого, я добавил эту часть $("tbody#table-body").find("tr:gt(0)").hide().slice(0, 9).show(); в конец функции generateTableBody(dataArray), и проблема была решена, но

Вторая проблема заключалась в том, что var numRows = $table.find('tbody tr').length; также ничего не вернуло, скорее всего, по той же причине, поэтому я попытался заполнить количество строк следующим образом:

В code.ge я добавил: 

function fetchLastRow(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
var lr = sheet.getLastRow()-1;
return lr;
}

И в файле HTML я добавил скрытый ввод для чтения возвращаемого lr следующим образом: 

<input type="hidden" id="numRows">
<script>
window.addEventListener('load', populate());
function populate(){ google.script.run.withSuccessHandler(displayValue).fetchLastRow(); }
function displayValue(lr){ document.getElementById("numRows").value=lr; }
</script>

Я смог успешно прочитать количество строк в скрытом вводе , так что следующий шаг было это: 

var numRows = document.getElementById('numRows').value;

или 

var numRows = document.getElementById('numRows').getValue();

или 

var numRows = document.getElementById('numRows').innerHTML;

, но (во всех случаях) var numRows = 0 (я думаю, что из-за window.addEventListener('load', populate()); также завершается после запроса)

Итак, я думаю, что если бы я смог наконец запустить функцию запроса (после создания данных таблицы и чтения максимальных активных строк в электронной таблице), это решит объяснены две проблемы.

1 Ответ

2 голосов
/ 02 августа 2020

Я считаю, что ваша цель следующая.

  • Вы хотите получить значения из Google Spreadsheet с помощью google.script.run.withSuccessHandler(generateTableBody).getData() и создать таблицу.
  • Вы хотите разделить таблицу по страницам с 10 элементами.

Очки модификации:

  • Я думаю, что ваш скрипт Google Apps верен.
  • На стороне HTML и Javascript ,
    • Я думаю, что ошибка возникает на document.addEventListener('DOMContentLoaded',function(){ generateTableBody(data); }).
    • В вашем случае я думаю, что требуется выполнить $('#myTable').each(function() {###}) после generateTableBody(). В этом случае поместите $('#myTable').each(function() {###}) в функцию, например nextStep(), и выполните ее после generateTableBody().

Когда указанные выше точки отражаются в вашем скрипте, он становится как

Измененный скрипт: 

<table id="myTable">

  <thead>
    <tr class="header">
      <th>First Name</th>
      <th>Second Name</th>
      <th>Third Name</th>
    </tr>
  </thead>

  <tbody id="table-body">
  </tbody>

</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  //document.addEventListener('DOMContentLoaded',function(){ generateTableBody(data); });  // Removed
  google.script.run.withSuccessHandler(generateTableBody).getData();

  function generateTableBody(dataArray) {
    var table = document.getElementById("myTable");
    var tbody = document.getElementById("table-body");
    dataArray.forEach(function(r) {
      var row = document.createElement("tr");
      var col1 = document.createElement("td");
      col1.textContent = r[0];
      var col2 = document.createElement("td");
      col2.textContent = r[1];
      var col3 = document.createElement("td");
      col3.textContent = r[2];
      row.appendChild(col1);
      row.appendChild(col2);
      row.appendChild(col3);
      tbody.appendChild(row);
    });
    nextStep(); // Added
  }

  function nextStep() { // Added

    // Below script is yours.
    $('#myTable').each(function() {
      var currentPage = 0;
      var numPerPage = 10;
      var $table = $(this);
      $table.bind('repaginate', function() {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * (numPerPage - 1)).show();
      });
      $table.trigger('repaginate');
      var numRows = $table.find('tbody tr').length;
      var numPages = Math.ceil(numRows / numPerPage);
      var $pager = $('<div class="pager"></div>');
      for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
          newPage: page
        }, function(event) {
          currentPage = event.data['newPage'];
          $table.trigger('repaginate');
          $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
      }
      $pager.insertBefore($table).find('span.page-number:first').addClass('active');
    });
  }
</script>
  • В соответствии с вышеуказанной модификацией при открытии HTML можно увидеть отдельные страницы. Когда вы щелкаете номер страницы в левом верхнем углу, страница перемещается.
...