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

我们有一个要求，以跟踪和审计生产，基本上我们有很多的订单，我们似乎是失去了我们的一些产品的方式（战利品等）。
为了阻止这一点，我们现在已经下订单到谷歌表，并列出了数量有多少应该有，一名员工，然后会写在有多少收到。
在Web应用程序上，我希望显示表格并有一个字段供员工输入计数，
因此，如果我有一个谷歌表，我可能会在列A [产品名称]列B [开始数量]和列C [计数数量]
在网络应用程序上，它将显示所有3列，但允许用户在[计数数量]列中输入计数。
这是可能的吗？（假设我需要html表格中的输入字段或可编辑表格？
谢谢

这将获取跨页中的所有数据，但您只能编辑最后一列。它是作为对话框构建的，但您可以轻松地将其更改为Web应用程序。
我有一些问题的范围，所以我想你可能需要他们。如果你不知道如何处理这些然后跳过他们，回来，如果你有问题。

"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"]

ordercounts.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");
}

orders.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>

下面是该工具的外观：

你所要做的就是输入更新后的计数，然后按回车键，电子表格就会改变。

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

1条答案

相关问题

热门标签

最新问答