1

背景：我在 Google 应用程序脚本中的 HTML 服务中准备了一个表单，我使用 Code.gs 中的 DoGet 函数调用该表单。

my doget function
function doGet() {
  return HtmlService.createTemplateFromFile('HTMLUI').evaluate();
}

发布后，它会呈现一个简单的浏览器表单，上面有一些标签、输入框、提交、重置和查找按钮。用户将输入信息单击提交，数据将存储在电子表格（背景）中。- 工作正常到这里。

现在，当用户单击查找按钮时 - 需要填充弹出式窗口，在此弹出式窗口中，用户可以输入信息（从下拉列表中），所选条目将被填充回输入框中，可以修改并再次提交。

问题：

在浏览器上时如何在 GAS 中弹出一个关闭窗口。

我在 HTML 服务中的查找按钮如下：

<div><input type="button" onclick="createPopup()" value="Find"></div>

最后调用javascript：

<script type="text/javascript">
        function createPopup() {
        google.script.run.popup(document.forms[0]);
    }
</script>

CreatePopup()javascript 代码：

function popup(form){
Logger.log("I am first called");
//Mycode should probably go here I think...  
Logger.log("I am last called");
}

查看日志时，它会显示“我是第一次被叫”和“我是最后一次被叫”。

我的研究：我发现 Spreadsheet.toast （类似这样的）适用于电子表格，但我如何在浏览器上获得小窗口..

4

1 回答 1

7

一个jQuery 对话框将满足您的需要。它是当前窗口的叠加层——而不是“弹出窗口”。

这里的演示代码可以很容易地适应 Google Apps 脚本。就是这样，去掉了很多额外的位：

截图模态表单

代码.js

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('ModalForm');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('jQuery UI Dialog - Modal form');

  return htmlOutput;
}

模态表单.html

<!-- Adapted from http://jqueryui.com/dialog/#modal-form -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add User": function() {
var bValid = true;
allFields.removeClass( );
// validation removed
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass(  );
}
});
$( "#form-action" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>

<!-- body -->
<div id="dialog-form" title="Create new user">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="form-action">Open Modal Form</button>
于 2013-07-29T16:36:46.557 回答