Запуск html-диалога одним щелчком мыши по ячейке
Примечание. В ячейке должен быть установлен флажок.
Функция запуска запускадля настройки onEdit ():
function startTrigger() {
if(ScriptApp.getProjectTriggers().indexOf('launchDialog')==-1){
ScriptApp.newTrigger('launchDialog').forSpreadsheet(getGlobal('SSId')).onEdit().create();
}
}
Фактическая диалоговая панель запуска:
Возможно, вы захотите использовать HtmlService с файлом и создать там свой пользовательский интерфейс JQuery.Затем верните ответ обратно на сервер с помощью google.script.run, и с помощью обработчиков успеха вы можете удалить диалог с помощью google.script.host.close ().
function launchDialog1(){
var ui=HtmlService.createHtmlOutput('<h1>Hello World</h1>');//Replace with createHtmlOuput with a file instead of a string. Build JQuery UI there.
SpreadsheetApp.getUi().showModelessDialog(ui, 'title');
SpreadsheetApp.getActiveSheet().getRange('F6').setValue(true);//reset the checkbox
}
Функция onEdit:
function launchDialog(e){
Logger.log('Range: %s SheetName: %s',e.range.getA1Notation(),e.range.getSheet().getName());
if(e.range.getA1Notation()=='F6' && e.range.getSheet().getName()=='CheckBoxes'){
launchDialog1();
}
}
Вот HTML / Javascript для JQuery DatePicker:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
function getDate(){
var dt=$('#datepicker').val();
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.postDate(dt);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onchange="getDate();" /></p>
</body>
</html>
Я получил большую часть из здесь
Вот функция Google Script postDate ():
function postDate(dt){
var ss=SpreadsheetApp.getActive();
var sh=ss.getActiveSheet();
var rg=sh.getActiveCell();
var dtA=dt.split('/');
rg.setValue(new Date(dtA[2],dtA[0],dtA[1]));
return true;
}
Это код скрипта Google для настройки триггера и для обработки функций onEdit:
function setupEditTrigger(funcName) {
if(ScriptApp.getProjectTriggers().indexOf(funcName)==-1){
ScriptApp.newTrigger(funcName).forSpreadsheet(getGlobal('SSId')).onEdit().create();
}
}
function checkForDate(e){
Logger.clear();
var chkbxcol=10;
var sheetName='CheckBoxes';
var sh=e.range.getSheet();
var shName=sh.getName();
var row=e.range.getRow();
var col=e.range.getColumn();
Logger.log('shName: %s row: %s col: %s',shName,row,col);
if(shName==sheetName && col==chkbxcol){
var prevCell=e.range.offset(0,-1).getValue();
if(Object.prototype.toString.call(prevCell) === '[object Date]'){
sh.getRange(row,col).setValue("FALSE");
return;
}else{
e.range.offset(0,-1).activate();
sh.getRange(row,col).setValue("FALSE");
showDatePickerDialog();
}
}else{
return;
}
}
function setupOnEdit(){
setupEditTrigger('checkForDate');
}
А вот так выглядит моя тестовая таблица:
Я только что создал столбец флажков, которые запускают onEdit. Я отмечаю, что ячейка слева от нее содержит дату.Если это так, я устанавливаю флажок в false и возвращаюсь.Если это не так, я запускаю диалог, и дата возвращается в ячейку рядом с флажком.Я возвращаю true, который возвращает к обратному вызову withSuccessHandler и закрывает диалог.