javascript - 从自定义 html 对话框获取数据

Question

我没有太多使用 googlescript，所以这希望是一个简单的问题。然而我在搜索中找不到答案。

我想要一个脚本，向我的谷歌工作表添加一个新按钮，打开一个带有复选框的对话框，并以某种方式返回哪些框被勾选。

编辑:目标是显示一个消息框，用复选框列出其他工作表的名称，并返回包含所选名称的列表。

现在，createGraph(agents) 中记录的值是 NULL，因此 HTML 脚本中的某些内容似乎不正确。

这是我更新的脚本(编辑:删除不必要的部分):

function openMsgBox() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var pages = ss.getSheets();
  var names = [];
  for(var i = 0; i < pages.length; i++){
    var name = pages[i].getName();
    if(name != 'Template'){
     names.push(name); 
    }
  }

  if(names.length == 0){
    Browser.msgBox('Error', 'no pages exist', Browser.Buttons.OK);
    return;
  }

  var template = HtmlService.createTemplateFromFile('MyHTMLFile');
  template.data = names;
  var html = template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setWidth(400).setHeight(20*names.length + 100);
  SpreadsheetApp.getUi().showModalDialog(html, 'title');
} 

function createGraph(agents) {
  Logger.log(agents);
}

这是更新后的 HTML 对话框:

<div id="container">
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

  <fieldset>
    <legend>Select the users you want to add</legend>
    <div id="agentList">
      <?for (var i = 0; i < data.length; i++) { ?>
      <b> <input type="checkbox" id="agent<?=i?>" value=<?=data[i]?> /> <?=data[i]?><br /></b>
      <? } ?>
      <br />
    </div>
    <input type="button" value="OK" onClick="createGraph()" />
  </fieldset>
</div>

<script>
// Pass input to server-side createGraph()
function createGraph() {
  var agents;
  var nrOfAgents = $("#agentList > div").length;
  for(var i = 0; i < nrOfAgents; i++){
    if($('agent'+i).is(":checked")){
      agents.push($('agent'+i).value);
    }
  }

  google.script.run
        .withSuccessHandler(
           // input delivered, close dialog
           function() {
             google.script.host.close();
           })
           .withFailureHandler(
           function() {
             var div = $('<div id="error" class="error">' + msg + '</div>');
             $(element).after($("#container"));
           })
            .createGraph(agents);
}

</script>

如果您对如何实现这一点有任何线索，请随时启发我，如果您发现脚本中存在任何其他问题，请指出。正如我所说，我是 googlescript 的新手，通常也不输入 javascript。

Answer 1

好吧，我想我可以明白你想做什么，但你仍然做错了一些事情。让我尝试加强你的代码。我在代码中添加注释来尝试解释。

您的对话框应如下所示:

  <fieldset>
    <legend>Select the users you want to add</legend>
    <div id="agentList">
      <?for (var i = 0; i < data.length; i++) { ?>
      <b> <input type="checkbox" id="agent<?=i?>" value=<?=data[i]?> /> <?=data[i]?><br /></b>
      <? } ?>
      <br />
    </div>
    <input type="button" value="OK" />
  </fieldset>
</div>

<script>
//since you are using jquery i went ahead and used it
//in google scripts (as far as i know) you can't use the onclick property inside html. 
//so you have to use jquery's $().click() syntax.
$(document).ready(function() {
  $('input').click(function() {
    google.script.run
      .withSuccessHandler(function(response) {
        //whatever you want to do with the response
        google.script.host.close();
      })
      .withFailureHandler(function(error) {
        var div = $('<div id="error" class="error">' + error + '</div>');
        $(element).after($("#container"));
      })
      .createGraph($('#agentsList').val());
  });
});
</script>

您的 createGraph 函数应该放在服务器端代码中(无论调用什么 .gs 文件)

希望这对您有一点帮助。我可以在哪里澄清任何事情？