使用Apps Script实现侧边栏显示/隐藏Sheet的问题求助

问题根源分析 #

原脚本无法正常工作主要有以下几个问题：

• 工作表名称不一致：showSheetSidebar读取的是Sheet List工作表，但showSelectedSheets里调用的是Daftar Sheet，导致无法匹配到正确的Sheet ID列表。
• HTML转义错误：生成复选框时使用了转义字符（<、"），拼接后无法渲染成可交互的复选框，导致无法正确获取选中状态。
• 类型不匹配：selectedSheets中的Sheet ID是字符串类型，但sheetIds从单元格读取后可能是数字类型，导致indexOf匹配失败。
• 侧边栏提前关闭：google.script.host.close()在脚本执行前就调用，可能中断showSelectedSheets的执行。

修正后的代码 #

Apps Script 代码 #

// 显示侧边栏
function showSheetSidebar() {
  // 使用HtmlTemplate安全生成HTML，避免转义问题
  const template = HtmlService.createTemplateFromFile('SheetSidebar');
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheetList = spreadsheet.getSheetByName('Sheet List');
  const lastRow = sheetList.getLastRow();
  
  // 获取Sheet名称和ID，并统一转为字符串类型
  template.sheets = sheetList.getRange('B9:C' + lastRow).getValues().map(row => ({
    name: row[0],
    id: row[1].toString()
  }));
  
  const htmlOutput = template.evaluate()
    .setWidth(300)
    .setHeight(250);
  
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

// 根据选中状态显示/隐藏Sheet
function showSelectedSheets(selectedSheetIds) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheetList = spreadsheet.getSheetByName('Sheet List'); // 统一工作表名称
  const lastRow = sheetList.getLastRow();
  
  const allSheetIds = sheetList.getRange('C9:C' + lastRow).getValues().flat().map(id => id.toString());
  
  allSheetIds.forEach(sheetId => {
    const targetSheet = spreadsheet.getSheetById(parseInt(sheetId));
    if (targetSheet) {
      // 统一类型后判断是否选中
      if (selectedSheetIds.includes(sheetId)) {
        targetSheet.showSheet();
      } else {
        targetSheet.hideSheet();
      }
    }
  });
}

HTML 代码（SheetSidebar.html） #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form id="sheetForm">
    <div>
      <p>选择要显示的工作表:</p>
      <div id="checkboxes">
        <!-- 通过模板引擎动态生成复选框 -->
        <? for (let sheet of sheets) { ?>
          <input type="checkbox" id="sheet-<?= sheet.id ?>" value="<?= sheet.id ?>">
          <label for="sheet-<?= sheet.id ?>"><?= sheet.name ?></label><br>
        <? } ?>
      </div>
    </div>
    <input type="button" value="应用" onclick="applyChanges()" />
  </form>

  <script>
    function applyChanges() {
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      const selectedSheets = Array.from(checkboxes)
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.value);
      
      google.script.run
        .withSuccessHandler(() => {
          google.script.host.close(); // 脚本执行成功后再关闭侧边栏
        })
        .showSelectedSheets(selectedSheets);
    }
  </script>
</body>
</html>

额外说明 #

• 使用HtmlTemplate替代直接拼接HTML字符串，避免转义错误，同时提升代码可维护性。
• 统一Sheet ID的类型为字符串，确保匹配逻辑准确。
• 将侧边栏关闭操作移到withSuccessHandler中，保证脚本执行完成后再关闭。
• 确认你的Google Sheets中存在名为Sheet List的工作表，且B列存储Sheet名称、C列存储Sheet ID，数据从第9行开始。

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