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

【问题标题】：Google Sheets + Apps Script + Webapps: Pull and edit an existing row data and update rowGoogle Sheets + Apps Script + Webapps：拉取和编辑现有行数据并更新行
【发布时间】：2021-03-11 23:48:41
【问题描述】：

您好，我正在尝试从与所选 ID 号匹配的行中从 google 表格中提取数据以编辑数据，然后单击更新按钮，以便在 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>

【问题讨论】：

我能问一下您当前的剧本问题吗？
是的，我无法让数据显示在 webapp 上
感谢您的回复。我认为当我看到您共享电子表格的脚本时，似乎这些与您的问题不同。哪些脚本是最新的？
共享表中的那个是最新的，我从该表中复制了它，不知道为什么会有所不同，但我在共享表上。谢谢
感谢您的回复。根据您的回复，我提出了一个修改后的脚本作为答案。你能确认一下吗？如果这不是您期望的方向，我深表歉意。

标签： javascript google-apps-script google-sheets

【解决方案1】：

修改点：

在 Google Apps 脚本方面：
- 当我看到共享电子表格中的脚本时，函数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 应用程序中。请注意这一点。

【讨论】：

感谢 Tanaike 那些修改效果很好。如果您能帮助我，另一个问题是，一旦我做出更改并按下更新按钮，我如何让它更新行，再次感谢
@Yvan L 感谢您的回复。我很高兴你的问题得到了解决。关于您的“另一个问题”，当我发现您的新问题时，我想检查一下。也谢谢你。