Google Web App Form文本换行与Sheet联动下拉菜单问题求助

问题1：工作备注单元格文本无法自动换行并自适应高度 #

修复方案 #

当前代码中<pre>标签的默认样式和<td>的CSS配置不足导致换行异常，调整如下：

• 移除<pre>标签对文本的不必要包裹，改用原生文本渲染（若需保留空格格式可保留<pre>并调整其样式）
• 为<td>添加强制换行和高度自适应的CSS属性

问题2：添加工作项下拉菜单实现表单内容动态更新 #

实现方案 #

1. 新增服务器端函数获取所有工作项列表
2. 在页面中添加下拉菜单并加载选项
3. 绑定选择事件，调用服务器端函数筛选数据并更新表格

修改后的Apps Script代码 #

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
  htmlOutput.jobItems = getJobItems();
  return htmlOutput.evaluate();
}

// 获取所有工作项（从"All Jobs info"标签页第一列获取，跳过表头）
function getJobItems() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var jobSheet = ss.getSheetByName('All Jobs info');
  var jobRange = jobSheet.getRange(2, 1, jobSheet.getLastRow() - 1);
  return jobRange.getValues().flat().filter(item => item !== "");
}

// 根据选中工作项返回对应数据，无参数时返回默认数据
function getSheetData(selectedJob) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Single Job View');
  
  // 更新筛选条件（假设"Single Data"标签页A1为筛选关键词，根据实际结构调整）
  if (selectedJob) {
    var singleDataSheet = ss.getSheetByName('Single Data');
    singleDataSheet.getRange('A1').setValue(selectedJob);
    SpreadsheetApp.flush();
  }
  
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();
  var links = dataRange.getRichTextValues().map(r => r.map(c => c.getLinkUrl() || null));
  var html = dataValues.map((r, i) =>
    "<tr>" + r.map((c, j) => {
      const link = links[i][j];
      const cellClass = c === "" ? "empty" : "";
      const content = link ? `<a href="${link}" target="_blank">${c}</a>` : c;
      return `<td class="${cellClass}">${content}</td>`;
    }).join("") + "</tr>"
  ).join("");
  return html;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table {
        border-collapse: collapse;
        background-image: url("请替换为你的背景图URL");
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 20px;
      }

      td {
        padding: 8px;
        border: 1px solid black;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        font-weight: bold;
        height: auto;
      }

      td.empty {
        border: none;
      }

      select {
        padding: 6px 12px;
        font-size: 16px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>National Supplements</h1>
    <!-- 工作项下拉菜单 -->
    <select id="jobSelector">
      <option value="">选择工作项</option>
      <? for(var i=0; i<jobItems.length; i++) { ?>
        <option value="<?= jobItems[i] ?>"><?= jobItems[i] ?></option>
      <? } ?>
    </select>

    <table id="jobTable"><?!= getSheetData() ?></table>

    <script>
      // 下拉菜单选择事件监听
      document.getElementById('jobSelector').addEventListener('change', function() {
        var selectedJob = this.value;
        google.script.run.withSuccessHandler(updateTable).getSheetData(selectedJob);
      });

      // 更新表格内容
      function updateTable(html) {
        document.getElementById('jobTable').innerHTML = html;
      }
    </script>
  </body>
</html>

关键注意事项 #

• 若需保留文本的空格格式，可在单元格内容外层重新添加<pre>标签，并为其添加margin: 0; white-space: pre-wrap;样式
• 需确认"All Jobs info"标签页的工作项列位置，若不在第一列，修改getJobItems函数中的getRange参数
• 确认"Single Data"标签页的筛选逻辑正确，确保设置筛选关键词后，"Single Job View"能同步显示对应数据
• 修改代码后需重新发布Web App，确保新代码生效

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