Google Sheets + Apps Script + Webapps：拉取和编辑现有行数据并更新行

Question

嗨，我正在尝试从与所选 ID 号匹配的行中提取数据以编辑数据，然后单击更新按钮，以便在 google 表中更新匹配的行，这是我的 google 表的链接。 https://docs.google.com/spreadsheets/d/1eaEfRtjMz7kyQfyXZHLuBhSz91SiUJzq1J2QJexJxy4/edit?ts=5fc42833#gid=0

这是我的gs代码

  function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
 
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
/* @Process Form */



function getCustDetail(search) {
  
  var ss = SpreadsheetApp.getActive()
  var ws = ss.getSheetByName("Data");
  var idvCustData = ws.getRange(2,1,ws.getLastRow(),8).getValues();
  var custIdList = idvCustData.map(function(r){ return r[0]; });
  var custDateList = idvCustData.map(function(r){ return r[2]; });
  var custclientList = idvCustData.map(function(r){ return r[3]; });
  var custlocationList = idvCustData.map(function(r){ return r[4]; });
  var custother1List = idvCustData.map(function(r){ return r[5]; });
  var custother2List = idvCustData.map(function(r){ return r[6]; });
 
  
  
  var searchPostion = custIdList.indexOf(search);
  var custDetail = {};
  custDetail.custId = custIdList[searchPostion];
  custDetail.custDate = custDateList[searchPostion];
  custDetail.custclient = custclientList[searchPostion];
  custDetail.custlocation = custlocationList[searchPostion];
  custDetail.custother1 = custother1List[searchPostion];
  custDetail.custother2 = custother2List[searchPostion];

  Logger.log(searchPostion);
  Logger.log(custDetail);
  Logger.log(search);
  
  if (searchPostion > -1){
  
  return  custDetail;
   
  } else {
    return '-';
 }
}

这是我的 JS 代码

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);  
  
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
    
  
 }           

//Retrieve Customer
function getCustomer() {
  
  var searchId = document.getElementById("Id").value;
  
 if (searchId != ""){
    google.script.run.withSuccessHandler(custDetail).getCustDetail(searchId);
  } 
  
}

//Success Handler
function custDetail(){

  document.getElementById("Id").innerHTML = cust.Id;
  document.getElementById("Date").innerHTML = cust.Date;
  document.getElementById("client").innerHTML = cust.client;
  document.getElementById("location").innerHTML = cust.location;
  document.getElementById("other1").innerHTML = cust.other1;
  document.getElementById("other2").innerHTML = cust.other2;

  M.updateTextFields();
  
}
</script>

这是我的 HTML 代码

    <!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        
    
    <?!= include('JavaScript'); ?>
    <?!= include('CSS'); ?>
    
    <!-- Select2 CDN -->
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
        
        
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
   
   
   
   
     <!-- CSS only -->
    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous"> 
  
    <!-- JS, Popper.js, jquery and jQuery autocomplete -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
        crossorigin="anonymous"> 
    </script> 
    <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"> 
    </script> 
    <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"> 
    </script>   

    </head>
   
      <body>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                      <p class="h4 mb-4 text-center">Ticket Form</p>
                      
                      
           <div class="form-row">
           
           
           
           

              
               <div class="form-group col-md-2">
               <label for="Id">ID</label>
               <input type="text" class="form-control" id="Id" name ="Id">
              </div>
              
             
              
              <div class="form-group col-md-2">
               <label for="Date">Ticket Date</label>
               <input type="date" class="form-control" id="Date" name ="Date">
              </div>
              
               <div class="form-group col-md-4">
                 <label for="client">Client</label>
                 <input type="text" class="form-control" id="client" name="client" >
               </div>
                           
               <div class="form-group col-md-4">
                 <label for="location">Location</label>
                 <input type="text" class="form-control" id="location" name="location" >
               </div>
             </div>
   
          <div class="form-row">
             
             <div class="form-group col-md-2">
               <label for="other1">Other1</label>
               <input type="text" class="form-control" id="other1" name ="other1">
              </div>
              
              <div class="form-group col-md-4">
                 <label for="other2">Other2</label>
                 <input type="text" class="form-control" id="other2" name="other2" >
               </div>
                
            </div>
               <hr>
                 <br>
                         
                   <button type="submit" class="btn btn-primary btn-block col-md-4 ">Update</button>
                        
             </form>

                     <br>
                    <div id="output"></div>
                  </div>
                 </div>      
                </div>
               </body>

Answer 1

修改点：

在 Google Apps 脚本方面：
- 当我在您的共享电子表格中看到脚本时，似乎 function getCustDetail没有返回值。 但是，您问题中的脚本返回custDetail 。
- 在getCustDetail中，您已经设置了search的值。 所以在这种情况下，总是使用该值。 请注意这一点。
- 当使用type="date"将值放入输入时，该值必须为yyyy-MM-dd 。
- 即使返回custDetail ，Javascript 端的custDetail()也不使用该参数。
- 即使custDetail使用 Google Apps 脚本端的参数，从 Google Apps 脚本返回的键也与 Javascript 端的键不同。
在 Javascript 侧：
- 在您共享的电子表格中， var data = google.script.run.getCustDetail(); 用来。 但是在当前阶段， google.script.run没有返回任何值。 请注意这一点。
- 当您想为文本输入设置值时，请使用value而不是innerHTML 。

当以上几点反映到您的脚本时，它变成如下。

修改后的脚本：

Google Apps 脚本方面：

请按如下方式修改getCustDetail 。

function getCustDetail(search) {
  search = Number(search);
  var ss = SpreadsheetApp.getActive();
  var ws = ss.getSheetByName("Data");
  var idvCustData = ws.getRange(2,1,ws.getLastRow(),8).getValues();
  var custIdList = idvCustData.map(function(r){ return r[0]; });
  var custDateList = idvCustData.map(function(r){ return r[2]; });
  var custclientList = idvCustData.map(function(r){ return r[3]; });
  var custlocationList = idvCustData.map(function(r){ return r[4]; });
  var custother1List = idvCustData.map(function(r){ return r[5]; });
  var custother2List = idvCustData.map(function(r){ return r[6]; });
  var searchPostion = custIdList.indexOf(search);
  var custDetail = {};
  custDetail.Id = custIdList[searchPostion];
  custDetail.Date = custDateList[searchPostion] && Utilities.formatDate(custDateList[searchPostion], Session.getScriptTimeZone(), "yyyy-MM-dd");
  custDetail.client = custclientList[searchPostion];
  custDetail.location = custlocationList[searchPostion];
  custDetail.other1 = custother1List[searchPostion];
  custDetail.other2 = custother2List[searchPostion];
  if (searchPostion > -1){
    return  custDetail;
  } else {
    return null;
  }
}

在这种情况下，它假设电子表格中“A”列的 ID 始终是数字。 请注意这一点。

Javascript侧：

请按如下方式修改custDetail 。

function custDetail(cust){
  if (cust) {
    document.getElementById("Id").value = cust.Id;
    document.getElementById("Date").value = cust.Date;
    document.getElementById("client").value = cust.client;
    document.getElementById("location").value = cust.location;
    document.getElementById("other1").value = cust.other1;
    document.getElementById("other2").value = cust.other2;
    M.updateTextFields();
  }
}

笔记：

当您修改 Web Apps 的脚本时，请将 Web Apps 重新部署为新版本。 这样，最新的脚本就会反映到 Web 应用程序中。 请注意这一点。

Google Sheets + Apps Script + Webapps：拉取和编辑现有行数据并更新行

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-30 02:44:16

修改点：

修改后的脚本：

Google Apps 脚本方面：

Javascript侧：

笔记：

Google Sheets + Apps Script + Webapps：拉取和编辑现有行数据并更新行

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-30 02:44:16

修改点：

修改后的脚本：

Google Apps 脚本方面：

Javascript侧：

笔记：

解决方案1
1 已采纳 2020-11-30 02:44:16