在Google Sheets中实现带产品复选框网格的动态表单问询

Got it, let's build that checkbox grid form for your Google Sheets template. Here's a complete solution that fits right into your existing setup:

1. 创建复选框网格的HTML界面 #

首先在Apps Script编辑器里新建一个HTML文件（命名为checkboxGrid.html），用响应式网格布局展示所有产品的复选框，同时添加提交按钮处理用户选择：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 20px;
        max-height: 400px;
        overflow-y: auto;
      }
      .checkbox-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px;
        border-radius: 4px;
        transition: background-color 0.2s;
      }
      .checkbox-item:hover {
        background-color: #f0f0f0;
      }
      .submit-btn {
        padding: 10px 20px;
        background-color: #1a73e8;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .submit-btn:hover {
        background-color: #1557b0;
      }
      .header {
        text-align: center;
        margin-bottom: 15px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h3 class="header">Select Products to Include</h3>
    <div class="checkbox-grid">
      <? for (const product of productNames) { ?>
        <div class="checkbox-item">
          <input type="checkbox" id="prod-<?= product ?>" name="selectedProducts" value="<?= product ?>">
          <label for="prod-<?= product ?>"><?= product ?></label>
        </div>
      <? } ?>
    </div>
    <div style="text-align: center; margin-top: 20px;">
      <button class="submit-btn" onclick="submitSelections()">Submit Selections</button>
    </div>

    <script>
      function submitSelections() {
        // 收集所有选中的产品
        const selectedProducts = Array.from(document.querySelectorAll('input[name="selectedProducts"]:checked'))
          .map(input => input.value);
        
        // 调用后端脚本保存选择
        google.script.run.withSuccessHandler(() => {
          alert('Your selections have been saved!');
          google.script.host.close();
        }).saveUserSelections(selectedProducts);
      }
    </script>
  </body>
</html>

2. 修改Apps Script逻辑替换原testFunction #

接下来更新你的脚本代码，把原来的testFunction()替换成显示复选框对话框的函数，同时确保产品名称能传递到HTML模板，还要添加处理用户选择的函数：

// 全局变量：存储读取到的产品名称
let PRODUCT_NAMES = [];

// 初始化：加载产品数据并创建菜单
function onOpen() {
  loadProductNamesFromSheet(); // 你的现有逻辑，从Data表读取产品名称到PRODUCT_NAMES
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Plot Data')
    .addItem('Select Products', 'showCheckboxGridDialog') // 替换原testFunction
    .addToUi();
}

// 示例：从Data表读取产品名称（根据你的实际数据位置调整）
function loadProductNamesFromSheet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  // 假设产品名称在A列，从第二行开始（跳过表头）
  const productRange = sheet.getRange('A2:A' + sheet.getLastRow());
  PRODUCT_NAMES = productRange.getValues().flat().filter(name => name.trim() !== ''); // 过滤空值
}

// 显示复选框网格对话框
function showCheckboxGridDialog() {
  // 检查是否有产品数据
  if (PRODUCT_NAMES.length === 0) {
    SpreadsheetApp.getUi().alert('No product names found in the Data sheet. Please add products first!');
    return;
  }

  // 渲染HTML模板并传递产品名称
  const htmlTemplate = HtmlService.createTemplateFromFile('checkboxGrid.html');
  htmlTemplate.productNames = PRODUCT_NAMES;
  const dialog = htmlTemplate.evaluate()
    .setTitle('Product Selection')
    .setWidth(600)
    .setHeight(500);
  
  SpreadsheetApp.getUi().showModalDialog(dialog, 'Select Products');
}

// 处理用户选择的保存逻辑（根据你的需求自定义）
function saveUserSelections(selectedProducts) {
  // 示例：将选中的产品保存到Data表的B1单元格（用逗号分隔）
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  sheet.getRange('B1').setValue(selectedProducts.join(', '));
  
  // 这里可以添加后续逻辑，比如基于选中产品生成图表等
  console.log('Selected products:', selectedProducts);
}

3. 部署和使用说明 #

1. 打开你的Google Sheet，点击Extensions > Apps Script进入脚本编辑器
2. 点击左上角的+ > HTML，创建名为checkboxGrid.html的文件，粘贴上面的HTML代码
3. 替换原脚本文件的代码为上面的Apps Script代码，调整loadProductNamesFromSheet()中的数据读取范围以匹配你的实际表格结构
4. 点击脚本编辑器的运行按钮，首次运行会要求授权，按照提示完成权限授予
5. 刷新你的Google Sheet，顶部菜单栏会出现Plot Data，点击Select Products就能看到复选框网格表单了

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