javascript - 将谷歌表格中的单选按钮填充到 HTML 中

标签 javascript html google-apps-script google-sheets

我有一个 google 表格字段,该字段将具有是或否值。当我呈现我使用的 HTML 表单时,我想根据 google 工作表中的内容填充 HTML 输入标签上的 "checked" 值,但似乎无法使 HTML 和脚本正常工作任何帮助是极大的赞赏。

这是我的:

在谷歌应用程序脚本中,我有一个显示 HTML 表单的函数

var html = HtmlService.createHtmlOutputFromFile("addUserLeadScore").setWidth(500).setHeight(550);

在 HTML 文件中,我加载表单并调用 getData 函数

window.onload = function LoadFormWithData()
        {
          google.script.run.withSuccessHandler(showData).getData();
        }

这里是getData

function getData(){
    var ss = SpreadsheetApp.getActive();
    var sheet = ss.getSheetByName("Template");
    var data = sheet.getRange(iRow, iCol, iNumRows, iNumCols).getValues(); 
    return data;
}

这是构建单选按钮的 HTML

<div id="firstAndLast"></div>
<td id="firstAndLastTd">
    <center>Prospect provided a first <b>AND</b> last name </center>           
    <input type="radio" name="firstAndLast" value="Yes"> Yes <br>
    <input type="radio" name="firstAndLast" value="No"> No <br>
</td> 

但是我该怎么做才能让 if data[0][1] = "yes":

<input type="radio" name="firstAndLast" value="Yes" checked>

代替

<input type="radio" name="firstAndLast" value="Yes" checked>

最佳答案

这是一个有趣的复选框对话框示例:

此函数根据电子表格中的设置生成复选框。这是电子表格的图像:

enter image description here

这是 GS 代码:

function runMe() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet5');
  var rg=sh.getRange(2,1,sh.getLastRow()-1,sh.getLastColumn());
  var vA=rg.getValues();
  var none=true;
  var html='<html><head>';
  html+='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>';
  html+='<style>input(margin:5px 5px 5px 0;}</style>';
  html+='</head>';
  html+='<body>';
  html+='<div id="mycheck">';
  html+='<form>';
  vA.forEach(function(r,i){
    if(r[0]) {
      html+=Utilities.formatString('<br /><input type="checkbox" id="%s" name="mychecks" value="%s" /><label for="%s">%s</label>',r[2],r[4],r[2],r[3]);
      none=false
    }
  });
  html+='<br /><input type="button" value="Submit" onClick="submitForm(this.parentNode);" /></form>';
  html+='</div>';
  html+='<script>';
  html+='function submitForm(frmData){google.script.run.withSuccessHandler(function(msg){$("#mycheck").append(msg);google.script.run.withSuccessHandler(function(){google.script.host.close();}).delay();}).processForm(frmData);}';
  html+='</script>';
  html+='</body></html>';
  if(none) {
    SpreadsheetApp.getUi().alert("No checkboxes enabled");
  }else{
    var userInterface=HtmlService.createHtmlOutput(html);
    SpreadsheetApp.getUi().showModelessDialog(userInterface, "My Checkboxes");
  }
}

function processForm(obj) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet5');
  var rg=sh.getRange(2,1,sh.getLastRow()-1,sh.getLastColumn()-1);
  var crg=sh.getRange(2,6,sh.getLastRow()-1,1);
  var vA=rg.getValues();
  var cvA=crg.getValues();
  var ts=Utilities.formatDate(new Date(),Session.getScriptTimeZone(),"yyyyMMdd HH:mm:ss" );
  Logger.log(JSON.stringify(obj));
  if(obj.mychecks) {  
    vA.forEach(function(r,i){
      if(r[0]) {
        if(obj.mychecks) {
          var idx=obj.mychecks.indexOf(r[4]);
          cvA[i][0]=(idx>-1)?"CHECKED":"UNCHECKED";
        }
      }else{
        cvA[i][0]="UNUSED";
      }
    });
    crg.setValues(cvA);
    return Utilities.formatString('<br />%s - Got it!',ts)
  }else{
    vA.forEach(function(r,i){
      cvA[i][0]=(r[0])?"UNCHECKED":"UNUSED";
    });
    crg.setValues(cvA);
    return Utilities.formatString('<br />%s - Got it! No checkboxes checked.',ts)
  }

}

function delay() {
  Utilities.sleep(3000);
}

这是正在运行的对话框:

enter image description here

关于javascript - 将谷歌表格中的单选按钮填充到 HTML 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59550404/

相关文章:

mysql - 谷歌应用程序脚本 JDBC/MySql : you are not owner of thread error

javascript - 在工作表中,填充单元格后向特定收件人发送电子邮件

javascript - 如何将对象数组返回到数组中?

javascript - 启动表排序程序时遇到问题

javascript - 多个 elementID 参数 HTML DOM getElementById() 方法?

javascript - 我无法使 onmouseout 功能工作

validation - 使用 Google Apps 脚本创建下拉菜单。更改颜色的方法是否缺失或不可用?

javascript - 每 2 个连续 float 元素添加中断(第 n 个 :child)

javascript - 如何调整 Canvas 及其中的元素的大小?

html - 如何在不使用属性目录或样式方向的情况下右对齐 <option> 的文本