gpt4 book ai didi

javascript - 如何从 google 脚本将值传递到 html 页面

转载 作者:行者123 更新时间:2023-11-28 17:54:03 24 4
gpt4 key购买 nike

我有一个谷歌表,维护一个项目列表,并在其后面运行一些脚本。我已经能够添加功能来单击“添加项目”按钮,该按钮将打开一个 HTML 窗口以输入信息,并在提交时向工作表添加新记录。

现在,我正在制定一个流程,以便在状态更改为“已取消”时删除记录。我想要做的是显示一个 html 窗口,列出项目的某些详细信息,并让用户有机会返回而不取消项目,或者输入一些注释来说明项目被取消的原因,然后继续。

我遇到的问题是用项目的详细信息填充 html 窗口。我已经找到了一种方法,但我知道这不是最好的方法。

Google 脚本:

function onEdit(e) {
if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") {
var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName());
var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn());
var cancelRow = cancelRange.getValues();

openCancelDialog(cancelRow);
}
}

function openCancelDialog(x) {
var html = HtmlService
//.createHtmlOutputFromFile('Cancel')
.createHtmlOutput(
'<table><tr><td colspan = \"2\"><b>You are cancelling the following project:</b></td></tr>' +
'<tr><td>Project Name: </td><td>' + x[0][4] + '</td></tr>' +
'<tr><td>Project Number: </td><td>' + x[0][0] + '</td></tr>' +
'<tr><td>Project Category: </td><td>' + x[0][1] + '</td></tr>' +
'<tr><td>Business Owner: </td><td>' + x[0][17] + '</td></tr>' +
'<tr><td>Project Manager: </td><td>' + x[0][18] + '</td></tr>' +
'</table>'
)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Cancel a Project');
}

这种方式是直接在gs中写入html。我想做的是创建一个单独的 html 页面。这可以使用此方法来完成(这就是我在 gs 中其他位置创建“添加项目”对话框的方式):

function openCancelDialog(x) {
var html = HtmlService.createHtmlOutputFromFile('Cancel').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Cancel a Project');
}

这将是 Cancel.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
<!-- Scripting to get my values? -->
</script>

</head>
<body>
<!-- Layout the window
Add a Comments section
Add a button to go back without cancel
Add a button to submit the cancel and update -->
</body>
</html>

但是我还没弄清楚如何将数组从 openCancelDialog 函数传递到 html,以便它显示在页面上..

我怀疑我需要向 Cancel.html 文件添加脚本才能获取这些值。但是有没有办法在创建数组时将该数组发送到 html?

最佳答案

科斯的回答给了我一些关于如何解决这个问题的想法。那,以及一些额外的阅读,特别是 https://www.w3schools.com/js/js_json_intro.asp以及后续部分,帮助我解决了这个问题。

新的js代码:

function onEdit(e) {
if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") {
var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName());
var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn());
var cancelRow = cancelRange.getValues();

//openCancelDialog(cancelRow);

var aSheet = e.source.getActiveSheet().getName();
var column = e.range.getColumn();
var row = e.range.getRow();
Logger.log("Col: " + column + " Row: " + row + " Sheet: " + aSheet);
Logger.log(cancelRow);
}
Logger.log(e);
}

function openCancelDialog(row) {
var ui = SpreadsheetApp.getUi();

// get template
var template = HtmlService.createTemplateFromFile('Cancel');

var myJSON = JSON.stringify(row);

// pass data to template
template.data = myJSON;

// get output html
var html = template.evaluate();

// show modal window
ui.showModalDialog(html, 'Cancel a Project');
}

新的 HTML:

<!DOCTYPE html>
<html>
<body>
<table>
<tr><td>Number: </td><td id="number"></td></tr>
<tr><td>Name: </td><td id="name"></td></tr>
<tr><td>Category: </td><td id="category"></td></tr>
<tr><td>Business Owner: </td><td id="owner"></td></tr>
<tr><td>Project : </td><td id="manager"></td></tr>
</table>

<script>
var objII = JSON.parse(<?=data?>);

document.getElementById("number").innerHTML = objII[0][0];
document.getElementById("name").innerHTML = objII[0][4];
document.getElementById("category").innerHTML = objII[0][1];
document.getElementById("owner").innerHTML = objII[0][17];
document.getElementById("manager").innerHTML = objII[0][18];
</script>

</body>
</html>

我怀疑可能有更优雅的方法来做到这一点,甚至可能是更“正确”的方法。但这似乎适合我需要它做的事情,所以我想我应该发布它以防其他人正在寻找。

谢谢

关于javascript - 如何从 google 脚本将值传递到 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44852387/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com