從谷歌表

Question

填充帶有數據選擇框我有一個谷歌的網站，我目前使用下面的腳本來填充我的選擇框從谷歌片是作爲我的數據庫中的數據：

<? var stringified = getData(); ?> 
<?var data = JSON.parse(stringified)?> 
    <select size="10" id="userChoice"> 
     <? for (var i = 0; i < data.length; i++) { ?> 
     <option> 
      <?= data[i] ?> 
      <? } ?> 
</select> 

這使用填充數據庫中每個條目的選擇框加載頁面。我想知道這是否是最好的方法。我真正想要做的是讓選擇框的內容更具動態性。

我寫了一個腳本來過濾（通過日期）谷歌表的內容，但我無法弄清楚如何讓這些過濾結果顯示在上面的選擇框中。我嘗試了幾種可能的解決方案，但不斷跟他們打路障。下面是將客戶端傳遞給服務器端的函數（注意我在下面的腳本中沒有意識到將數據傳遞迴選擇框，這只是爲了說明我是如何過濾數據的）：

//Takes the dates that were entered into the first two date pickers and sends them over to the server side stringified. The server side then uses these dates to filter out jobs not within the given time period. 
function dateFilter(){ 
var date = {}; 

//dates pusehd into array 
date[0] = document.getElementById("startDate").value; 
date[1] = document.getElementById("endDate").value; 

//array stringified 
var dates = JSON.stringify(date);//Convert object to string 

google.script.run 
    .getData2(dates); 

那麼這裏就是通過在服務器端數據庫過濾代碼：

function getData2(dates) { 
    var ss = SpreadsheetApp.openById('1emoXWjdvVmudPVb-ZvFbvnP-np_hPExvQdY-2tOcgi4').getSheetByName("Sheet1"); 
    var date = JSON.parse(dates); 
    var dateArray = []; 

    for (var k in date) {//Loop through every property in the object 
    var thisValue = date[k];// 
     dateArray.push(thisValue); 
    }; 
    var startDate = Date.parse(dateArray[0]); 
    var endDate = Date.parse(dateArray[1]); 
    var jobReference = []; 
    var job; 
    var dateCell1; 
    var dateCell; 

    if ((startDate==NaN) || (endDate==NaN)){ 

    for (var i = 2; job!=""; i++){ 
    job = ss.getRange(i,43).getValue(); 
    jobReference.push(job); 
    }; 
    } 

    else{ 
    for (var i = 2; job!=""; i++){ 
    dateCell1 = ss.getRange(i,3).getValue(); 
    dateCell = Date.parse(dateCell1); 
    if (startDate<=dateCell&&endDate>=dateCell){ 
    job = ss.getRange(i,43).getValue(); 
    jobReference.push(job); 
     Logger.log("here it is"+jobReference); 
    } 
      else{ 

      } 
    } 

    }; 

    var jR = JSON.stringify(jobReference); 
     return jR; 
} 

現在，我已經試過幾件事情，有一個成功處理程序更改線路<? var stringified = getData();?>使用getData2沒有按」 t似乎工作（它喊我，我試圖解析的變量是未定義在服務器端）。所以我試着把一個if/else放進去，如果這個變量是！=未定義的，那麼它只會解析它，那也行不通。任何建議，將不勝感激。

Answer 1

我想通了！這是功能性的，但也許不是最佳實踐，所以如果有人有任何輸入，隨時可以加入。

因此，客戶端的代碼在選擇框中的第一位保持不變。

下位，在這裏我過到服務器端發送的日期改爲這樣：

function dateFilter(){ 
var sdate = document.getElementById("startDate").value; 
var edate = document.getElementById("endDate").value; 

google.script.run.withSuccessHandler(dateSuccess) 
    .getData2(sdate,edate); 

} 

所以，因爲它只有兩個變量我拿出它推到一個數組的部分。這消除了服務器端的解析問題，因此具有未定義的變量。我還添加了一個成功處理程序。

服務器端代碼留下基本上是相同的，但是我確實改變了對循環咯。相反，有它遍歷數據庫，直到它找到了一個空白單元格在一個特定列的，我加了var last = ss.getLastRow();，把它圈雖然直到i<= last。這使我的代碼不能超時。

接下來，我加入我用於成功處理程序的功能：

function dateSuccess(jobs){ 
document.getElementById('userChoice').options.length = 0; 

var data = JSON.parse(jobs) 

for (var i = 0; i < data.length; i++) { 
      var option = document.createElement("option"); 
option.text = data[i] 
var select = document.getElementById("userChoice"); 
select.appendChild(option); 

     } 
} 

就像一個魅力！

Answer 2

小腳本即<? ?>被編譯並使用execute函數創建頁面時運行。它們不適用於動態修改網頁。根據服務器返回的數據修改選項，在這種情況下從getData（）中修改。你會做這樣的事

首先您將谷歌。腳本調用成功modifyoptions功能

google.script.run.withSuccessHandler(modifyOptions) 
    .getData2(dates); 

將上面的代碼會自動傳遞getData2即JR值的返回值modifyOptions功能

function modifyOptions(jobReference){ 
    var selOpt = document.getElementById("userChoice") 
    selOpt.innerHTML =""      // Remove previous options 
    var options = ""    
    var data = JSON.parse(jobReference) 
     for (var i = 0; i < data.length; i++) { 
     options += "<option>"+data[i] +</option> //New string of options based on returned data 
     } 

    selOpt.innerHTML = options    //Set new options 

} 

你可以找到如何修改工作示例在javascript中選擇選項here

希望幫助！