繁体   English   中英

绑定到Google表格的Google Apps脚本中的分组复选框

[英]Grouping checkboxes in Google Apps Script tied to Google Sheets

我创建了一个表单,该表单具有一组复选框,这些复选框从Google工作表的一列填充。 因此,如果列中的条目更改,则表单复选框也将更改。

我的问题与获取选择和检索数据的方式有关。

单击表单上的提交按钮时,它将调用一个函数:google.script.run.test(document.forms [0])

我的测试函数使用Logger.log()将信息附加到工作表中的表格以及日志中。

document.forms [0]的格式为:{= [等级1,等级2,等级3,等级4],名称=测试4}

我的第一个问题是:
如何命名复选框组,以便在对象document.forms [0]中使用数组-以便可以使用document.forms [0] [“ SOME-NAME”]进行调用?
现在我必须用document.forms [0] [“”]来称呼它,这让我非常不舒服。

我的第二个问题有点奇怪。 我发现,如果填充Google工作表中复选框的描述是两个单词的描述-则表单将返回一个包含选择的数组。 例如。 来自Logger {= [Level 1,Level 2,Level 3,Level 4],名称=测试4}

但是,如果描述是单个单词,则表单会将每个选择返回为自己的条目,例如。 来自记录器{名称=测试6,三个=三个,一个=一个,两个=两个}

如何确保表单返回数组而不是单个选择?

我为测试和演示而创建的工作表在这里:

https://docs.google.com/spreadsheets/d/1vzg4VMgDbqz0ImCH_V5-1vF5qY0UHVGHK6JJfCVrADM/edit?usp=sharing

任何帮助,将不胜感激!!

Html for the form :
<p><b>Testing check boxes and retrieving info</b> </p>
<hr>
<div>
  <form>
    <table>
      <tr>
        <td>Name:  </td><td><input id="name" name="name" type ="text" /></td>
      </tr>      
      <tr>      
          <td>Choices: </td>
          <td><fieldset  class="group" id="choices" name="choices" >
             --CHANGE--           
          </fieldset></td>          
      </tr>      
      <tr>
        <td>Submit Information: </td><td> <input onclick="formSubmit()" type="button" value="Submit" /></td>
      </tr>      
    </table>
    <hr>
    <table>
      <tr>
        <td>Cancel Transaction: </td><td>
          <input onclick="google.script.host.close()" type="button" value="Cancel" /></td>
       </tr>
     </table>    
  </form>
</div>

<script>
  function formSubmit(){
    google.script.run.test(document.forms[0]);
    google.script.host.close();
  }  
</script>


Function in Code.gs that opens the form:
// Set up the checkbox list and update html code from html file and open form
function openForm(){
  // get Classes to populate the check box list and create html string
  var values = getClasses();
  var html = ""
  for(var i=1; i < values.length; i++){
         html = html + '<input type="checkbox" label="classList" name="' + values[i][0] + '" value="' + values[i][0] + '"> '+values[i][0] + '<br>';
  }

  // replace place holder in html file with checkbox code
  var f1 = HtmlService.createHtmlOutputFromFile('form1').getContent();
  f1 = f1.replace("--CHANGE--",html);

  // open spread sheet and then open form in sheets
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var f2 = HtmlService.createHtmlOutput(f1);
  ss.show(f2); 
}

Function that is called after submit button pressed:
// Get the info from the form and do something with it
function test(info){
  Logger.log(info);
  var classList = info[''];

  if (Array.isArray(classList)){ 
    classList = classList.toString();
  } 

  var data = [info['name'], classList];

  var ss = SpreadsheetApp.getActive().getSheetByName("Test");
  ss.appendRow(data);

}

若要使复选框选择作为数组传递,您将需要使用自定义代码处理数据,然后再将其传递到服务器。 我将通过标签名称获取所有元素。 换句话说,获取所有输入元素。

<script>

  function formSubmit(){
    console.log('document.forms[0] ' + document.forms[0]);

    var choicesElmt = document.getElementById("choices");
    var allInputElements = choicesElmt.getElementsByTagName("input");
    var isChecked=false,
        arrayOfChecked=[],
        thisElmt;

    for (var key in allInputElements) {
      console.log('key is: ' + key)

      thisElmt = allInputElements[key];

      console.log('thisElmt is: ' + thisElmt)

      if (thisElmt!==undefined) {
        isChecked = thisElmt.checked;

      };

      console.log('isChecked: ' + isChecked)
      if (isChecked===true) {
        arrayOfChecked.push(key);

      };
    };

    console.log('arrayOfChecked: ' + arrayOfChecked);

    google.script.run.test(arrayOfChecked);

    //google.script.host.close();
  }

</script>

现在,您的代码正在为每个复选框动态分配一个名称,该名称是电子表格的ColumnA中的值。 Apps脚本会更改表单对象,唯一的方法就是使用名称。 如果没有检查或输入中没有值,则不会在表单对象中传递任何值。 在服务器端,您不需要在对象上使用零索引。 只需使用“点”和名称即可。

Logger.log('info.One: ' + info.One);

如果从未选中复选框2,则info.Two将是未定义的。

您可以在.gs服务器代码中循环浏览该对象,以查看该对象中的所有内容:

for (var key in info) {
  Logger.log('key is: ' + key)
  Logger.log('value is: ' + info[key])

};

在玩@SandyGood的代码时,我能够发现自己的问题的答案。

为每个复选框创建html时,添加以下行:

<input type="checkbox" label="classList" name="checkList" value="' + values[i][0] + '">

如果您将每个复选框的名称字段设置为相同的值,则选择内容将作为数组分组在一起。

这似乎规范了文档的行为。Forms [0]-如果复选框的名称与文档相同。Forms[0]始终返回一个数组,而不管复选框的描述(一个单词还是两个单词)。

我已经更新了Google表格中的代码。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM