能否用App Script在Google Sheet侧边栏实现两个带多选列表框的标签页？

下面是完整的实现方案，包含侧边栏UI的HTML代码和Google Apps Script逻辑代码：

侧边栏HTML代码（命名为Sidebar.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* 标签页基础样式 */
      .tab-container {
        width: 100%;
        margin: 10px 0;
      }
      .tab-buttons {
        display: flex;
        border-bottom: 1px solid #ccc;
      }
      .tab-btn {
        background: #f1f1f1;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 10px 20px;
        transition: 0.3s;
        font-size: 14px;
      }
      .tab-btn.active {
        background-color: #ccc;
      }
      .tab-content {
        display: none;
        padding: 15px 0;
      }
      .tab-content.active {
        display: block;
      }
      /* 多选列表样式 */
      .checkbox-group {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #eee;
        padding: 10px;
      }
      .checkbox-item {
        margin: 5px 0;
      }
      .action-btn {
        margin-top: 15px;
        padding: 8px 16px;
        background: #4285f4;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <!-- 标签页切换按钮 -->
      <div class="tab-buttons">
        <button class="tab-btn active" onclick="openTab('tab1')">项目列表</button>
        <button class="tab-btn" onclick="openTab('tab2')">成员列表</button>
      </div>

      <!-- 第一个标签页：项目多选列表 -->
      <div id="tab1" class="tab-content active">
        <h4>选择项目</h4>
        <div class="checkbox-group" id="projectList">
          <!-- 动态填充项目选项 -->
        </div>
        <button class="action-btn" onclick="getSelected('project')">获取选中项目</button>
      </div>

      <!-- 第二个标签页：成员多选列表 -->
      <div id="tab2" class="tab-content">
        <h4>选择成员</h4>
        <div class="checkbox-group" id="memberList">
          <!-- 动态填充成员选项 -->
        </div>
        <button class="action-btn" onclick="getSelected('member')">获取选中成员</button>
      </div>
    </div>

    <script>
      // 标签页切换逻辑
      function openTab(tabId) {
        const tabContents = document.querySelectorAll('.tab-content');
        const tabBtns = document.querySelectorAll('.tab-btn');
        // 重置所有标签状态
        tabContents.forEach(content => content.classList.remove('active'));
        tabBtns.forEach(btn => btn.classList.remove('active'));
        // 激活目标标签
        document.getElementById(tabId).classList.add('active');
        event.currentTarget.classList.add('active');
      }

      // 页面加载时获取并填充列表数据
      window.onload = function() {
        google.script.run.withSuccessHandler(populateProjectList).getProjectData();
        google.script.run.withSuccessHandler(populateMemberList).getMemberData();
      };

      // 填充项目列表
      function populateProjectList(data) {
        const container = document.getElementById('projectList');
        data.forEach(item => {
          const div = document.createElement('div');
          div.className = 'checkbox-item';
          div.innerHTML = `<input type="checkbox" id="proj_${item.id}" value="${item.name}">
                           <label for="proj_${item.id}">${item.name}</label>`;
          container.appendChild(div);
        });
      }

      // 填充成员列表
      function populateMemberList(data) {
        const container = document.getElementById('memberList');
        data.forEach(item => {
          const div = document.createElement('div');
          div.className = 'checkbox-item';
          div.innerHTML = `<input type="checkbox" id="mem_${item.id}" value="${item.name}">
                           <label for="mem_${item.id}">${item.name}</label>`;
          container.appendChild(div);
        });
      }

      // 收集选中项并传递给后端脚本
      function getSelected(type) {
        let checkboxes = type === 'project' 
          ? document.querySelectorAll('#projectList input[type="checkbox"]:checked')
          : document.querySelectorAll('#memberList input[type="checkbox"]:checked');
        const selected = Array.from(checkboxes).map(cb => cb.value);
        google.script.run.processSelectedItems(selected, type);
        alert(`已选中${selected.length}个${type === 'project' ? '项目' : '成员'}`);
      }
    </script>
  </body>
</html>

Google Apps Script 代码（绑定到Google Sheet，命名为Code.gs） #

// 打开侧边栏入口函数
function showMultiTabSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('双标签多选工具')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

// 获取项目数据（可替换为从Sheet指定范围读取的逻辑）
function getProjectData() {
  // 示例数据，实际使用时改为读取Sheet内容
  return [
    {id: 1, name: '项目A'},
    {id: 2, name: '项目B'},
    {id: 3, name: '项目C'},
    {id: 4, name: '项目D'}
  ];
}

// 获取成员数据（可替换为从Sheet指定范围读取的逻辑）
function getMemberData() {
  // 示例数据，实际使用时改为读取Sheet内容
  return [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'},
    {id: 3, name: '王五'},
    {id: 4, name: '赵六'}
  ];
}

// 处理选中的项（可根据需求自定义逻辑）
function processSelectedItems(selectedItems, type) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 将选中内容写入Sheet指定单元格，示例写入A1和B1
  if (type === 'project') {
    sheet.getRange('A1').setValue(`选中项目：${selectedItems.join(', ')}`);
  } else {
    sheet.getRange('B1').setValue(`选中成员：${selectedItems.join(', ')}`);
  }
}

使用步骤 #

1. 在Google Sheet中打开「扩展程序」→「Apps Script」
2. 创建两个文件：Code.gs粘贴上述GS代码，Sidebar.html粘贴HTML代码
3. 运行showMultiTabSidebar函数，完成授权后即可打开侧边栏
4. 如需对接Sheet实际数据，修改getProjectData和getMemberData函数，替换为从Sheet读取数据的逻辑

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