Извлечение данных из таблиц Google в таблицу HTML - PullRequest
0 голосов
/ 06 июня 2019

У меня есть небольшая настройка веб-приложения на листах Google, в которой почти 10 тысяч строк и 9 столбцов.

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

Как вы уже могли догадаться, она занимает слишком много памяти, поскольку она на стороне клиента, а загрузка и фильтрация выполняются медленно.

Ранее у меня был интерактивный фильтр с прослушивателем событий при каждом нажатии клавиши, я менял его на клавишу «Ввод», так как для первых двух или трех символов требовалось слишком много времени.

Скрипт для index.HTML

 <script>
    //global variables
    var rows = []; //rows 
    var currentOrder = 'ascending'; //sorting order
    var inputFilter = document.getElementById('partNum'); //input field for ItemName
    var inputFilterDes = document.getElementById('partDes'); //input field for description
    var nameTable = document.getElementById('table'); //html table

    //load function being used for pulling data from google sheet

    function load() {
    //calling get data function with array and filter array inside
    google.script.run
        .withSuccessHandler(function(response) {
        //response function will be separted into column values
        rows = response.map(function(element) {
            //all the elements converted into columns
            return {
            itemCode: element[0],
            itemName: element[1],
            itemDescription: element[2],
            inStock: element[3],
            committed: element[4],
            onOrder: element[5],
            available: element[6],
            warehouse: element[7]
            };
        });
        //rows mapping finished

        renderTableRows(rows);
        //initial load finished here

        //filter section starts

        //Item name filter

        inputFilter.addEventListener('keyup', function(evt) {
            if (evt.keyCode === 13) {
            // Cancel the default action, if needed
            evt.preventDefault();
            var filter = evt.target.value.toString().toLowerCase();
            }
            var filteredArray = rows.filter(function(row) {
            return row.itemName.toString().toLowerCase().includes(filter);
            });

            renderTableRows(filteredArray);
        });
        //description filter

        inputFilterDes.addEventListener('keyup', function(evt) {
            if (evt.keyCode === 13) {
            // Cancel the default action, if needed
            evt.preventDefault();
            var filterDes = evt.target.value.toString().toLowerCase();
            }
            var filteredArrayDes = rows.filter(function(row) {

            return row.itemDescription.toString().toLowerCase().includes(filterDes);
            });
            renderTableRows(filteredArrayDes);
        });

        })
        .getData("SAP"); //pull data from defined sheet
    }
    //retruing array values in HTML table and placing them in page
    function renderTableRows(arr) {
    nameTable.innerHTML = arr.map(function(row) {
        return '<tr>' + 
        '<td>' + row.itemCode + '</td>' + '<td>' + row.itemName + '</td>' + 
        '<td>' + row.itemDescription + '</td>' + '<td>' + row.inStock + '</td>' + 
        '<td>' + row.committed + '</td>' + '<td>' + row.onOrder + '</td>' + '<td>' + 
        row.available + '</td>' + '<td>' + row.warehouse + '</td>' + '</tr>';
    }).join('');
    };


    load();
  </script>

Мой code.gs

function doGet(e) {

  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('index').evaluate().setTitle("My Web App");
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

function getData(sheetName) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);

  return sheet.getSheetValues(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn());
}

function getScriptUrl() {
  var url = ScriptApp.getService().getUrl();
  return url;
}

Я попытался переместить его на стороне сервера, используя следующую команду, но не смог

РЕДАКТИРОВАТЬ: Удален мой код попытки на стороне сервера, так как я думаю, что это приведет к путанице.

Я не кодер, поэтому извините меня, если это звучит глупо или неорганизованно.

ТАК ЯЯ пытаюсь увеличить скорость, и для этого я хочу переместить скрипты на стороне сервера, но я не совсем уверен, поможет мне это или нет, поэтому я открыт для любых других методов, чтобы улучшить скорость приложения.

Ответы [ 2 ]

1 голос
/ 06 июня 2019

На создание html-таблицы с 9 столбцами и 10K строками уходит около 112 секунд.

function dataToHtmlTable() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getActiveSheet();
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var html="<style>th,td{border:1px solid black;}</style><table>";
  for(var i=0;i<vA.length;i++) {
    html+='<tr>';
    for(var j=0;j<vA[i].length;j++) {
      if(i==0) {
        html+=Utilities.formatString('<th>%s</th>',vA[i][j]);
      }else{
        html+=Utilities.formatString('<td>%s</td>',vA[i][j]);
      }
    }
    html+='</tr>';
  }
  html+='</table>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'HTML Table')
}
0 голосов
/ 06 июня 2019

Помимо перемещения map() на асинхронный вызов сервера, вы можете оптимизировать код на стороне клиента, создав функцию упорядочивания, которая работает над DOM.В настоящее время каждый раз, когда запускается событие keyup, вы повторно отображаете всю таблицу (каждый раз по 10 000 итераций, если я правильно понимаю размер Spreadsheet).

Сначала получите доступ к таблице.children (при условии, что он состоит из элементов <thead> и <tbody>: var collection = nameTable.children.item(1).children (возвращает HtmlCollection всех строк).

Во-вторых, перебирайте строки и скрывайте те, которые не удовлетворяюткритерии фильтрации со свойством hidden (или вместо этого создайте и toggle класс CSS):

for(var i=0; i<collection.length; i++) {
  var row      = collection.item(i);
  var cells    = row.children;
  var itemName = cells.item(1).textContent; //access item name (0-based);
  var itemDesc = cells.item(2).textContent; //access item description (0-based);

  var complies = itemName==='' && itemDesc===''; //any criteria here;

  if( complies ) {
    row.hidden = false;
  }else {
    row.hidden = true;
  }

}

В-третьих, переместите функцию renderTableRows() также на асинхронный вызов сервера, поскольку вы визуализируете строки таблицыс конкатенацией строк (вместо createElement() на document) с htmlString.

Полезные ссылки

  1. Объектная модель документа (DOM) ссылка;
  2. Связь сервер-клиент в ссылке GAS;
  3. Рекомендации для работы с HtmlService;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...