提交表单后，刷新 Google Sheets 上模态对话框中嵌入的 HTML 表单的下拉选项

问题描述 投票：0回答：1

似乎有很多关于如何在这里完成此任务的问题，但我无法实现任何适合我的情况的东西。

我在 Google 表格的模式对话框中有一个 HTML 表单。此表单用于使用 

textFinder
更新作业名称。 （这些职位名称在公司的多个电子表格中使用，有时与其他值连接在一起，例如将职位和个人链接在一起。）

第一个字段是一个下拉列表，用于选择要更新的作业名称。下拉列表从 Google 电子表格上的某个范围中提取值。第二个字段是用于输入新名称的文本字段。提交表单后，原始作业名称的所有实例都将替换为多个电子表格中的新名称，包括填充表单下拉列表的电子表格范围中的原始名称。

所有这些都工作正常。我陷入困境的是允许人们在不关闭模式（或自动关闭）的情况下连续进行多项更改。下拉列表不会更新以显示新值。我真正想要实现的是确认消息（而不是我正在使用的警报），然后刷新表单。我不确定如何在我的代码中实现该功能。我知道可以使用 

withSuccesshandler
函数来完成，但我无法让它工作。有人可以帮我解决这个问题吗？

适用的代码是：

代码.js

function onOpen() {
    var ui = SpreadsheetApp.getUi();
      ui.createMenu('Manager Menu')
        .addItem('Update Employee Name', 'updateNameModal')
        .addToUi();
    SpreadsheetApp.getUi();
}
    
function updateNameModal() {
    let spread = SpreadsheetApp.getActiveSpreadsheet();
    let sheet = spread.getSheetByName("Sheet2");
    let values = sheet.getDataRange().getValues().map( row => row[0] ); // get the name from each row
    var html = HtmlService.createTemplateFromFile("updateNameFile");
    html.dropdown = values;
            SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Update a Name Globally");
}

上面的脚本创建模式并定义下拉列表的范围。

HTML

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link
    rel="stylesheet"
    href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
    />
    <style>
      .container {
          margin: 5px 5px 5px 5px;
      }

      .input-Dropdown {

        width: 290px; 
        font-size: 12px;
        text-align: left; 
        float: left;
        padding: 5px 5px 5px 5px;
      }

      .input-Text {

        width: 290px;
        font-size: 12px;
        text-align: left; 
        float: left;
        padding: 5px 5px 5px 5px;
      }

      .custom-heading {
        font-weight: bold;
      }

    </style>  
  </head>
  <body>
    <div class="container">
      
    <form id ="nameForm" onkeydown="return event.key != 'Enter'">

    <!-- Create input fields to accept values from the user -->
    Select a name from the list:<br><br>
    <select class="input-Dropdown" id="Current_Name"/>
    <? for(var i=1; i<dropdown.length; i++){ ?>
      <option><?= dropdown[i] ?></option>
    <?}?>
    </select>
    <br>
    <br>
    <br>

    Change Name To:<br><br>
    <input class="input-Text" type="text" id="Updated_Name"/>
    <br>
    <br>
    <br>

    <button class="action" onclick="submitNameUpdate();">Update</button>
    <button onclick="google.script.host.close();">Close</button>
    </form>
    </div> 
    <script>
    function submitNameUpdate() {
       var current_name = document.getElementById("Current_Name").value;
       var updated_name = document.getElementById("Updated_Name").value;

       //Asynchronous 
        google.script.run.withSuccessHandler(data => {
          window.alert("✔️ " +current_name+ " has been changed to " +updated_name+ " across the system.").servercommand();
        }).withFailureHandler(er => {
          alert(er);
        }).updateJobName(current_name, updated_name); // <-- updateJobName function exist on Code.gs, parameters are passed to that function
    }
  </script>
  </body> 
</html>

代码.js

function updateJobName(current_name, updated_name) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Sheet2");
  let value1 = current_name;
  let value2 = updated_name;

  sheet.getRange("A2:A").createTextFinder(value1).replaceAllWith(value2);

单击“更新”按钮时运行上面的脚本并替换下拉列表中的值。

如果需要更多信息，请告诉我。谢谢你。

html google-sheets google-apps-script
1个回答
0
投票

我相信您的目标如下。

  • 您想在单击“更新”按钮时更新下拉列表。

修改要点：

您的函数

updateJobName
是您当前的脚本吗？在您展示的 Javascript 中，似乎 
updateJobName
返回 
data
。但是，在您的 Google Apps 脚本中，
updateJobName
不返回任何值。为了实现这一点，我认为需要返回更新后的值。

当这些点都体现在你的脚本中时，下面的修改如何？

Javascript 方面：

请修改

submitNameUpdate
如下。

来自：

google.script.run.withSuccessHandler(data => {
  window.alert("✔️ " +current_name+ " has been changed to " +updated_name+ " across the system.").servercommand();
}).withFailureHandler(er => {
  alert(er);
}).updateJobName(current_name, updated_name);

致：

google.script.run.withSuccessHandler(data => {
  var select = document.getElementById("Current_Name");
  select.innerHTML = "";
  data.forEach(e => {
    var option = document.createElement("option");
    option.text = e;
    option.value = e;
    select.appendChild(option);
  });
  document.getElementById("Updated_Name").value = "";
  window.alert("✔️ " +current_name+ " has been changed to " +updated_name+ " across the system.").servercommand();
}).withFailureHandler(er => {
  alert(er);
}).updateJobName(current_name, updated_name);

Google Apps 脚本方面：

请修改

updateJobName
如下。

function updateJobName(current_name, updated_name) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Sheet2");
  let value1 = current_name;
  let value2 = updated_name;
  sheet.getRange("A2:A").createTextFinder(value1).replaceAllWith(value2);
  return sheet.getDataRange().getValues().map( row => row[0] );
}

经过上述修改，当单击“更新”按钮时，下拉列表将更新为新值。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.