基于Google App Script实现表单下方按用户名过滤表格（已解决）

项目背景 #

我做了一个关联Google Sheet的Google App Script项目，专门用来让学生记录3年体育课程的进度——既方便学生查看自己的进度，也能为GCSE阶段的项目提供数据支持。

核心功能与需求 #

• 提供HTML表单：学生输入信息提交后，数据会自动存入关联的Google Sheet
• 表单下方需展示按表单中Username字段过滤后的表格数据，只显示当前学生的进度记录

已完成的核心实现 #

目前已经解决了核心功能问题，下面是新旧两种实现代码：

旧版实现（基础版） #

// 后端获取过滤数据
function getFilteredData(username) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Progress");
  const allData = sheet.getDataRange().getValues();
  // 假设Username在第3列（索引为2）
  return allData.filter(row => row[2] === username);
}

// 前端渲染表格
<script>
// 调用后端接口并渲染
function loadFilteredTable(username) {
  google.script.run
    .withSuccessHandler(renderFilteredTable)
    .getFilteredData(username);
}

// 手动构建表格DOM
function renderFilteredTable(data) {
  const tableContainer = document.getElementById("progress-table");
  tableContainer.innerHTML = "";
  
  // 创建表头
  const headerRow = document.createElement("tr");
  data[0].forEach(header => {
    const th = document.createElement("th");
    th.textContent = header;
    headerRow.appendChild(th);
  });
  
  // 创建表格主体
  const tbody = document.createElement("tbody");
  data.slice(1).forEach(row => {
    const tr = document.createElement("tr");
    row.forEach(cell => {
      const td = document.createElement("td");
      td.textContent = cell;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
  
  // 组装表格
  const table = document.createElement("table");
  table.appendChild(headerRow);
  table.appendChild(tbody);
  tableContainer.appendChild(table);
}
</script>

新版实现（优化版） #

// 后端：使用Sheet过滤器提升效率，同时保留数组过滤做双重校验
function getFilteredData(username) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Progress");
  const dataRange = sheet.getDataRange();
  
  // 创建临时过滤器
  const filterCriteria = SpreadsheetApp.newFilterCriteria()
    .whenTextEqualTo(username)
    .build();
  dataRange.setFilter(filterCriteria);
  
  // 获取过滤后的数据，再做一次数组过滤确保准确性
  const filteredData = dataRange.getValues().filter(row => row[2] === username);
  
  // 清除全局过滤器，避免影响Sheet其他操作
  dataRange.removeFilter();
  
  return filteredData;
}

// 前端：用模板字符串简化渲染逻辑
<script>
async function loadFilteredTable(username) {
  // 异步获取过滤后的数据
  const filteredData = await new Promise(resolve => {
    google.script.run
      .withSuccessHandler(resolve)
      .getFilteredData(username);
  });
  
  // 生成表格HTML
  const tableHtml = `
    <table style="border-collapse: collapse; width: 100%;">
      <thead>
        <tr>
          ${filteredData[0].map(header => `<th style="border: 1px solid #ccc; padding: 8px;">${header}</th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${filteredData.slice(1).map(row => `
          <tr>
            ${row.map(cell => `<td style="border: 1px solid #ccc; padding: 8px;">${cell}</td>`).join('')}
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;
  
  // 插入到页面容器
  document.getElementById("progress-container").innerHTML = tableHtml;
}
</script>

待优化方向 #

当前已经实现了提交表单后按Username过滤展示数据的功能，接下来计划优化的点是：页面加载时自动读取当前用户的Username，无需手动触发即可完成过滤和表格渲染，进一步提升学生使用的便捷性。

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