是否有任何方法可以简化代码中的各种函数调用.在google.script.run. withsuccessshandle



我在我的谷歌表中创建了一个模态对话框,您可以看到从表中获得的数据。这种模式只是为了以一种有序的方式读取工作表的数据,并且比使用google工作表的工作表的单元格更美观。

模态工作得很好,但我有一个问题,它是以下:

我的字典里有几个函数。从我的谷歌表格中获取数据。同时,我必须在我的html文件中使用google.script.run.withSuccessHandler调用这些函数才能在我的模板中获得数据。

是否有任何方法可以简化单个google.script.run.withSuccessHandler中的函数调用过程?

这是我的代码html:

google.script.run.withSuccessHandler(function (value) {document.getElementById('nombreclientePE').textContent = value;} ).clientePedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('numeropedidoPE').textContent = value;} ).numeroPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('fechapedidoPE').textContent = value;} ).fechaPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('estadopedidoPE').textContent = value;} ).estadoPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('logometodopagopedidoPE').src = value;} ).logoMetodoPagoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('metodopagopedidoPE').textContent = value;} ).metodoPagoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('gastosenviopedidoPE').textContent = value;} ).gastosEnvioPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('metodoenviopedidoPE').textContent = value;} ).metodoEnvioPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('subtotalpedidoPE').textContent = value;} ).subtotalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentocantidad%pedidoPE').textContent = value;} ).descuentoCantidadPorcentajePedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentocantidad€pedidoPE').textContent = value;} ).descuentoCantidadEurosPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentototalpedidoPE').textContent = value;} ).descuentoTotalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('totalpedidoPE').textContent = value;} ).totalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('direccionpedidoPE').textContent = value;} ).direccionEnvioPE();

链接到一个谷歌工作表文档与现场演示。若要打开模态窗口,活动单元格必须位于任何客户行的任何单元格中。然后,点击"查看订单"按钮。

Google Sheets Demo Live

如果信息来自表单:code html

function formSubmit() {
var data = document.forms[0]
var tab = []
for (var i=0;i<data.length;i++){
if (data[i].type != "button"){
tab.push(data[i].value)
}
}
google.script.run.addData(tab);
document.forms[0].reset()
}

代码gs

function addData(tab) {
mySheet.getRange(getLastDataRow(bdd) + 1,1,1,tab.length).setValues([tab])
}

Code.gs

const o = {
'nombreclientePE': () => clientePedidoPE(),
'numeropedidoPE': () => numeroPedidoPE(),
'fechapedidoPE': () => fechaPedidoPE(),
'estadopedidoPE': () => estadoPedidoPE(),
'logometodopagopedidoPE': () => logoMetodoPagoPE(),
'metodopagopedidoPE': () => metodoPagoPE(),
'gastosenviopedidoPE': () => gastosEnvioPE(),
'metodoenviopedidoPE': () => metodoEnvioPE(),
'subtotalpedidoPE': () => subtotalPedidoPE(),
'decuentocantidad%pedidoPE': () => descuentoCantidadPorcentajePedidoPE(),
'decuentocantidad€pedidoPE': () => descuentoCantidadEurosPedidoPE(),
'decuentototalpedidoPE': () => descuentoTotalPedidoPE(),
'totalpedidoPE': () => totalPedidoPE(),
'direccionpedidoPE': () => direccionEnvioPE()
};
function PE(input) {
const output = [];
for (const id of input) {
const value = o[id]();
output.push([id, value]);
}
return output;
}
function formVerPedido2(numPedido) {
var hoja = SpreadsheetApp.getActiveSheet();
var fila = hoja.getCurrentCell().getRow();
var numPedido = hoja.getRange(fila,3,1,1).getValue();
var template = HtmlService.createTemplateFromFile('PedidosIndex');
template.input = Object.keys(o);
var pedidoContendido = template.evaluate()
.setWidth(800)
.setHeight(1300);

//var logoMetodoPago = logoMetodoPagoPE();
//htmlOutput = logoMetodoPago;
SpreadsheetApp.getUi().showModalDialog(pedidoContendido, 'Pedido #' + numPedido + '');
}

index . html

<script>const input = <?!= JSON.stringify(input) ?>;</script>
<?!= include('PedidosJavaScript'); ?> <!-- See PedidosJavaScript.html file -->

js.html

google.script.run.withSuccessHandler(onSuccess).PE(input);
function onSuccess(output) {
for (const [id, value] of output) {
document.getElementById(id).textContent = value;
}
}

我的建议是:将所有函数替换为numeroPedidoPE(), fechaPedidoPE()…只有一个(假设数据在同一行)

function transferPedidoData() {
var hoja = SpreadsheetApp.getActiveSheet();
var fila = hoja.getCurrentCell().getRow();
var pedidoData = hoja.getRange('B'+fila+':S'+fila).getValues();
return pedidoData;
}

然后,在HTML文件中,添加以下脚本

<script>
<? 
var pedido = transferPedidoData();
?>
</script>

,最后,调用pedidoshhtml .html文件中的不同数据,如下所示,x根据需要

<?= pedido[0][x] ?>
  • 这里的小演示(我已经添加了2个文件,因为我不想修改你的脚本)https://docs.google.com/spreadsheets/d/1QNMs99gOhH5WfrutYWo08o4jGOztFIBFQGbjpaYfSjQ/edit?usp=sharing
  • 编辑=我也试图在你的电子表格中实现这种方法,希望这有助于你理解(所以只有一个调用GSheet) https://docs.google.com/spreadsheets/d/1CtZJNYEVJLkexB1PCiy0c4liJT72iOxWQhS1W93khT8/edit?usp=sharing
  • 从'客户端'传输数据,保持function direccionEnvioPE()不变,在html中添加var direccionEnvio = direccionEnvioPE();,并使用以下地址<?= direccionEnvio ?>

这肯定需要简化。在客户端,您需要这样做:

function gscriptRun(fnName) {
google.script.run
.withSuccessHandler(function (value) {
document.getElementById(fnName).textContent = value;
})
.runFunc(fnName);
}
const fnsToRun = ['clientePedidoPE', 'numeroPedidoPE'];
fnsToRun.forEach(fn => gscriptRun(fn));

我们将所有google.script.run调用封装在一个函数中。然后,我们创建了一个要在服务器端调用的函数名数组,并使用Array.prototype.forEach()调用它们。

在服务器端,你需要有这个函数:

function runFunc(fnName) {
return globalThis[fnName]();
}

它只执行函数的名字。

然而,这看起来不是一个很好的方法,因为有很多API调用。你可能想重写你的代码,这样你就可以提取所有的数据,只需一个调用。

如果您希望从电子表格中的不同位置获取值,则可以遵循这种类型的结构。就我个人而言,我会把它们放在一行中,并使用getValues()而不是单独获取每个值。

gs:

function getMyData(tA) {
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName("Sheet0");
const rgObj = {'nombreclientePE':'A1','numeropedidoPE':'A2','fechapedidoPE':'A3','estadopedidoPE':'A4','logometodopagopedidoPE':'A5','metodopagopedidoPE':'A6','gastosenviopedidoPE':'A7','metodoenviopedidoPE':'A8','subtotalpedidoPE':'A9','decuentocantidad%pedidoPE':'A10','decuentocantidad€pedidoPE':'A11','decuentototalpedidoPE':'A12','totalpedidoPE':'A13','direccionpedidoPE':'A14'}
let obj = {pA:[]}
tA.forEach(p => {
obj.pA.push(p);
obj[p] = sh.getRange(rgObj[p]).getValue();
});
return obj;
}

html:

<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<!-- You provide the body -->
<script>
window.onload = getData()
function getData() {
const tA = ['nombreclientePE','numeropedidoPE','fechapedidoPE','estadopedidoPE','logometodopagopedidoPE','metodopagopedidoPE','gastosenviopedidoPE','metodoenviopedidoPE','subtotalpedidoPE','decuentocantidad%pedidoPE','decuentocantidad€pedidoPE','decuentototalpedidoPE','totalpedidoPE','direccionpedidoPE'];
google.script.run
.withSuccessHandler((obj) => {
obj.pA.forEach(p => {
document.getElementById(e).textContent = obj[p];
})
})
.getMyData(tA) 
}
</script>
</body>
</html>

我认为从你已经拥有的最简单的方法是使用单个google.script.run调用包装器函数返回所有数据,然后在JavaScript中设置值。

列出数组中的元素,然后在成功时遍历它们,而不是对每个元素使用google.script.run调用:

const elements = [
'nombreclientePE',
'numeropedidoPE',
'fechapedidoPE',
'estadopedidoPE',
'metodopagopedidoPE',
'gastosenviopedidoPE',
'metodoenviopedidoPE',
'subtotalpedidoPE',
'decuentocantidad%pedidoPE',
'decuentocantidad€pedidoPE',
'decuentototalpedidoPE',
'totalpedidoPE',
'direccionpedidoPE',
]

const logoId = 'logometodopagopedidoPE'

function callGasFn() {
google.script.run.withSuccessHandler(setData).getAllValues()
}

function setData(data) {
elements.forEach((x, i) => document.getElementById(x).textContent = data[0][i])
document.getElementById(logoId) = data[1]
}

callGasFn()

然后在Apps Script中你有你的getAllValues()函数:

function getAllValues() {
return [
[
clientePedidoPE(),
numeroPedidoPE(),
fechaPedidoPE(),
estadoPedidoPE(),
metodoPagoPE(),
gastosEnvioPE(),
metodoEnvioPE(),
subtotalPedidoPE(),
descuentoCantidadPorcentajePedidoPE(),
descuentoCantidadEurosPedidoPE(),
descuentoTotalPedidoPE(),
totalPedidoPE(),
direccionEnvioPE(),
],
logoMetodoPagoPE()
]
}

我将徽标从主数组中分离出来,因为它设置了src而不是textContent

在您提供的工作表中,Maria del Campo在客户端工作表中缺失-我不知道这是否是故意的,但它确实导致direccionEnvioPE()失败,因为她的数据在工作表中不可用。

最新更新