gpt4 book ai didi

javascript - Web 应用程序 - Google 表格 - 带有输入字段的 html 表格

转载 作者:行者123 更新时间:2023-11-28 03:26:04 29 4
gpt4 key购买 nike

我们需要跟踪和审核生产,本质上我们有很多订单,但我们似乎在途中丢失了一些产品(废品等)。

为了阻止这种情况,我们现在已在 Google 表格上下了订单,并列出了应有的数量,然后员工会写下收到的数量。

在网络应用程序上,我想显示表格并有一个字段,员工可以在其中输入计数,

因此,如果我有一个 Google 表格,我可能会在 A 列 [产品名称] b 列 [起始数量] 和 C 列 [计数数量] 中找到

在网络应用程序上,它将显示全部 3 列,但允许用户在 [计数数量] 列中输入计数。

这可能吗? (假设我需要 html 表格中的输入字段或可编辑表格?

谢谢

最佳答案

这将获取跨页中的所有数据,但您只能编辑最后一列。它是作为一个对话框构建的,但人们可以轻松地将其更改为网络应用程序。

我在范围方面遇到了一些问题,所以我认为你可能需要它们。如果您不知道如何处理这些内容,请跳过它们,如果遇到问题再回来。

"oauthScopes": ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/script.container.ui"]

订单计数.gs:

function getOrders() {
var ss=SpreadsheetApp.getActive();
var osh=ss.getSheetByName("Orders");
var org=osh.getDataRange();
var vA=org.getValues();
var rObj={};
var html='<style>th,td{border: 1px solid black}</style><table>';
vA.forEach(function(r,i){
html+='<tr>';
r.forEach(function(c,j){
if(i==0){
html+=Utilities.formatString('<th>%s</th>',c);
}else if(j<r.length-1){
html+=Utilities.formatString('<td>%s</td>', c);
}else{
html+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + c + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
});
html+='</tr>';
});
html+='</table>';
return html;
}

function updateSpreadsheet(updObj) {
var i=updObj.rowIndex;
var j=updObj.colIndex;
var value=updObj.value;
var ss=SpreadsheetApp.getActive();
var sht=ss.getSheetByName("Orders");
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}

function launchOrdersDialog(){
var userInterface=HtmlService.createHtmlOutputFromFile('orders');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "OrderCounts");
}

订单.html:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(hl){
console.log('Getting a Return');
$('#orders').html(hl);
})
.getOrders();

});
function updateSS(i,j) {
var str='#txt' + String(i) + String(j);
var value=$(str).val();
var updObj={rowIndex:i,colIndex:j,value:value};
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(updateSheet)
.updateSpreadsheet(updObj);
}

function updateSheet(data) {
//$('#success').text(data.message);
$('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
}
console.log('My Code');
</script>
</head>
<body>
<div id="orders"></div>
</body>
</html>

该工具如下所示:

enter image description here

enter image description here

enter image description here

您所要做的就是输入更新的计数并按 Enter 键,电子表格就会发生变化。

关于javascript - Web 应用程序 - Google 表格 - 带有输入字段的 html 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58631012/

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