Question

我有一个Google网站，目前正在使用以下脚本在我的选择框中填充来自用作我的数据库的Google工作表中的数据：

<? 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>

这将使用填充了数据库中每个条目的选择框加载页面。我想知道这是否是最佳方式。我真正想做的是让选择框的内容更加动态。

我写了一个脚本来过滤（按日期）Google表格的内容，但我无法弄清楚如何将这些过滤结果显示在上面的选择框中。我已经尝试了几种可能的解决方案，但要继续使用它们。下面是客户端将日期传递到服务器端的功能（请注意，我在下面的脚本中没有发现任何内容会将数据传递回选择框。这只是为了说明我如何过滤数据）：

//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似乎无法正常工作（它向我大喊我变量我试图尝试解析在服务器端未定义）。所以我尝试将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);

}

所以，因为它只有两个变量，我把它推出了一个数组。这消除了在服务器端解析的问题，从而具有未定义的变量。我还添加了一个成功处理程序。

服务器端代码基本保持不变，但我确实略微更改了for循环。我没有让它在数据库中循环直到它在特定列中找到空白单元格，而是添加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

当使用<? ?>函数创建页面时，编译并运行Scriptlet，即execute。它们不用于动态修改网页。要根据服务器返回的数据修改选项，在本例中为getData（）。你会做这样的事情

首先，您将google.script设置为成功调用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

中找到有关如何修改select-options的实际示例

希望有所帮助！

使用Google表格中的数据填充选择框

2 个答案: