javascript - 将数据从 Google Sheets 提取到 HTML 表中

Question

我在 Google 表格上设置了一个小型 Web 应用程序，其中有近 10k 行和 9 列。

目前，我从 Google 表格中获取了所有数据，并将其放在 HTML 表中，然后我使用事件监听器过滤表时几乎没有输入。

正如您可能已经猜到的那样，它占用了太多内存，因为它位于客户端，并且加载和过滤速度很慢。

早些时候，我有一个交互式过滤器，每次按键时都会有一个事件监听器，我已将其更改为“Enter”键，因为前两个或三个字符花费了太多时间。

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>

我的代码.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;
}

我尝试使用以下命令将其移动到服务器端，但失败了

编辑:删除了我的服务器端尝试代码，因为我认为这会造成困惑。

我不是编码员，所以如果这听起来很愚蠢或无组织，请原谅我。

所以我正在尝试提高速度，为此，我想将脚本移动到服务器端，但是我不完全相信它会对我有帮助，所以我愿意接受任何其他方法来提高应用程序的速度。

Answer 1

除了搬家map()对于异步服务器调用，您可以通过创建一个在 DOM 上工作的排序函数来优化客户端代码。 。目前，每次 keyup事件被触发，您重新渲染整个表格(如果我正确理解 Spreadsheet 大小，每次 10K 迭代)。

首先，访问表的子级(假设它是由 <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. Document Object Model (DOM)引用；
2. Server-client communication在气体引用中；
3. Best practices用于使用 HtmlService ;