从电子表格上的标题信息创建的数据输入对话框
代码.gs：
function onOpen() {
SpreadsheetApp.getUi().createMenu("My Menu")
.addItem('Launch Dialog','launchTheFormAsDialog')
.addToUi();
}
function buildForm() {
var searchColumnName='RefId';
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var tA=sh.getRange(1,1,1,sh.getLastColumn()).getValues()[0];
var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
tA.splice(1,5);
var ftA=tA.slice();
hA.splice(1,5);
var fA=hA.slice();
var dstr=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
var html='<style>input{margin:2px 5px 2px 0;}</style><form id="myForm">';
for(var i=0;i<fA.length;i++) {
switch(ftA[i]){
case 'date':
html+=Utilities.formatString('<br /><input type="%s" value="%s" name="%s" /> %s',ftA[i],dstr,fA[i],fA[i]);
break;
default:
html+=Utilities.formatString('<br /><input type="%s" name="%s" /> %s',ftA[i],fA[i],fA[i]);
break;
}
}
html+='<br /><input type="button" value="Submit" onclick="submitForm(this.parentNode)" /></form>';
return {html:html};
}
function testUpload() {
upload({'Status':'none', 'Comment':'to long to fit', 'ClientName':'Don Trump', 'RefCode':'Tweeter', 'Final_Status':'impeachment', 'Product':'Bullshit', 'RefId':'id3', 'DaysPassed':'12', 'Final_Status_Date':'2019-12-23', 'Date':'2019-12-23', 'Notes':'none'})
}
function upload(theForm) {
Logger.log(theForm);
var kA=Object.keys(theForm);
kA.splice(kA.indexOf('refId'),1);//remove refID
Logger.log(kA);
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
var hObj={};
hA.forEach(function(e,i){hObj[e]=i+1});
Logger.log(hObj);
var vA=sh.getRange(3,1,sh.getLastRow()-2,2).getValues();
for(var i=0;i<vA.length;i++) {
if(theForm.RefId==vA[i][0]) {
kA.forEach(function(key){
Logger.log(hObj[key]);
Logger.log(theForm[key]);
sh.getRange(i+3,hObj[key]).setValue(theForm[key]);
});
}
}
return buildForm();
}
function launchTheFormAsDialog() {
var ui=HtmlService.createHtmlOutputFromFile('theform').setHeight(550);
SpreadsheetApp.getUi().showModelessDialog(ui, "Form Data Entry");
}
表单.html：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(function(){
google.script.run
.withSuccessHandler(function(obj){
$('#formDiv').html(obj.html);
})
.buildForm();
});
});
function submitForm(frmData) {
google.script.run
.withSuccessHandler(function(obj){
//console.log('flag1');
$('#formDiv').html(obj.html);
})
.upload(frmData);
}
function updateSelect(vA,id){
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++) {
select.options[i] = new Option(vA[i][1],vA[i][0]);
}
}
console.log('My Code');
</script>
</head>
<body>
<h1 id="main-heading">Form Data Entry</h1>
<div id="formDiv"></div>
</body>
</html>
我的电子表格：
我添加了输入数据类型，这样我就可以初始化日期字段，这样即使添加或移动了列，也可以完全根据电子表格上的数据构建表单。您始终可以隐藏该行，因为它位于顶部。
对话框：