[Google Apps] - 以 Google Spreadsheet 當作成績查詢平台 - Demo 2

最近有網友問到，原來的成績查詢只能顯示一筆查到的紀錄，如果要顯示多筆呢?

原先的想法是，在Server端把資料查詢好，透過組成前端HTML字串輸出的方式來達成
結果，超乎意料，他真的被當成文字輸出而不是Bind到原來的HTML Table當中
應該是原有Template在evaluate時，原有的HTML Elements會先輸出到前端，然後再從Server
下載字串輸出，這部分就沒有重建HTML DOM了

查了一下 Google App Script Document 有一個範例可以套用 Calling Apps Script functions from a template，可以直接將 Spreadsheet的內容 Dump出來變成前端的 Data Source.

於是將程式稍微修改一下，原先查詢介面，新增一個 Checkbox 來判斷前端的查詢，以判斷走不同的路徑

在 程式碼.gs 的 doPost 加入一個參數的判斷，如果前端勾選 isShowAll，就改抓 qryResult2.html來顯示

function doPost(e){
  var id=e.parameter.id;
  var authCode=e.parameter.authCode;
  var isShowAll=e.parameter.isShowAll;  
  if (isShowAll){
    var tmpl = HtmlService.createTemplateFromFile('qryResult2');
    return tmpl.evaluate();
  } else {
    return qryScores(id,authCode);
  }
}

qryResult2.html則將原本 qryResult.html 中

這一大段程式碼，改用迴圈的方式來Dump資料

這邊可以看到，使用 data 去承接 Server 端 qryScoresAll() 所回傳的Data (陣列型態) 所以透過 for-loop 將 Data 在前端組成 HTML Code 輸出

function qryScoresAll() {
  var iRow=3;
  var sheetApp = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1lIUUdZximIlLNM6UXjCAeKeqYJTHtIXBFq9iLEuap1c/edit#gid=0');
  var OutputRecord="";
  
  var sheetScore = sheetApp.getSheetByName('學期成績');
  
  return sheetScore.getDataRange().getValues();
}

就可以做成 Data Dump了。

如果是要做條件篩選輸出多筆，該怎麼做?

可以改寫 qryScoresAll() 把篩選的資料，以陣列的方式輸出，這邊就不再說明 :)

測試網址:
https://script.google.com/macros/s/AKfycbz4QFQDkgaLGlEFnF10pvRXxKyp_kP9dpdDQkeKZpM/dev