Google Sheets模态框表单提交后刷新下拉选项实现求助

核心修改目标 #

• 替换原生alert为页面内自定义确认提示
• 提交修改后无需关闭模态框，自动刷新下拉框选项

后端脚本（Code.js）修改 #

// 打开模态对话框
function openRenameDialog() {
  const html = HtmlService.createHtmlOutputFromFile('RenameForm')
    .setWidth(400)
    .setHeight(250);
  SpreadsheetApp.getUi().showModalDialog(html, '批量修改职位名称');
}

// 获取职位列表（用于初始化和刷新下拉框）
function getJobTitles() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  // 替换为你的职位数据源范围，示例为'职位列表!A2:A'
  const range = ss.getRange('职位列表!A2:A');
  const values = range.getValues().flat().filter(val => val !== '');
  return values;
}

// 执行批量替换操作
function replaceJobTitle(oldTitle, newTitle) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheets = ss.getSheets();

  // 遍历所有表格替换内容
  sheets.forEach(sheet => {
    const textFinder = sheet.createTextFinder(oldTitle);
    textFinder.replaceAllWith(newTitle);
  });

  // 更新数据源中的旧职位名称
  const jobSheet = ss.getSheetByName('职位列表');
  const dataRange = jobSheet.getDataRange();
  const values = dataRange.getValues();
  values.forEach((row, idx) => {
    if (row[0] === oldTitle) {
      jobSheet.getRange(idx+1, 1).setValue(newTitle);
    }
  });

  // 返回更新后的职位列表，供前端刷新下拉框
  return getJobTitles();
}

前端HTML表单（RenameForm.html）修改 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-container {
        padding: 20px;
        font-family: Arial, sans-serif;
      }
      .form-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      select, input {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
      #success-message {
        margin-top: 15px;
        padding: 10px;
        background-color: #dff0d8;
        color: #3c763d;
        display: none;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <div id="success-message"></div>
      <div class="form-group">
        <label for="old-title">选择要修改的职位:</label>
        <select id="old-title"></select>
      </div>
      <div class="form-group">
        <label for="new-title">新职位名称:</label>
        <input type="text" id="new-title" required>
      </div>
      <button onclick="submitForm()">提交修改</button>
    </div>

    <script>
      // 页面加载时初始化下拉框
      window.onload = loadJobTitles;

      // 加载/刷新职位列表到下拉框
      function loadJobTitles() {
        const select = document.getElementById('old-title');
        select.innerHTML = '';
        google.script.run.withSuccessHandler(titles => {
          titles.forEach(title => {
            const option = document.createElement('option');
            option.value = title;
            option.textContent = title;
            select.appendChild(option);
          });
        }).getJobTitles();
      }

      // 提交表单逻辑
      function submitForm() {
        const oldTitle = document.getElementById('old-title').value;
        const newTitle = document.getElementById('new-title').value.trim();

        if (!newTitle) {
          alert('请输入新职位名称');
          return;
        }

        google.script.run
          .withSuccessHandler(updatedTitles => {
            // 刷新下拉框选项
            loadJobTitles();
            // 清空输入框
            document.getElementById('new-title').value = '';
            // 显示自定义成功提示
            const msgEl = document.getElementById('success-message');
            msgEl.textContent = `已成功将 "${oldTitle}" 修改为 "${newTitle}"`;
            msgEl.style.display = 'block';
            // 3秒后自动隐藏提示
            setTimeout(() => msgEl.style.display = 'none', 3000);
          })
          .withFailureHandler(error => alert('修改失败: ' + error.message))
          .replaceJobTitle(oldTitle, newTitle);
      }
    </script>
  </body>
</html>

关键实现说明 #

1. 下拉框刷新逻辑：通过withSuccessHandler接收后端返回的更新后职位列表，调用loadJobTitles重新渲染下拉框，确保每次修改后选项都是最新的
2. 自定义确认提示：用页面内的div元素替代原生alert，避免弹窗打断操作，还能自动隐藏提升体验
3. 数据同步：后端在完成批量替换后，同步更新职位数据源，确保后续获取的列表是最新状态

内容的提问来源于stack exchange，提问作者Codedabbler