如何在Google Apps Script中配置侧边栏实现按输入ID读写Sheet数据

1. 谷歌脚本（GS）端完整代码 #

var SHEET = SpreadsheetApp.getActiveSheet();

function showSidebar() {
  var ui = SpreadsheetApp.getUi();
  var tmp = HtmlService.createTemplateFromFile('index');
  tmp.initialValue = initialValue();
  var html = tmp.evaluate();
  html.setTitle('Gestion des demandes')
  ui.showSidebar(html);
}

function initialValue(){
  return SHEET.getRange(2,1).getValue();
}

// 新增：根据ID查找对应行号
function getRowById(id) {
  var allIds = SHEET.getRange('A:A').getValues().flat();
  // 跳过表头行（第一行）
  for (var i = 1; i < allIds.length; i++) {
    if (allIds[i].toString() === id.toString()) {
      return i + 1; // 数组索引从0开始，表格行号从1开始，所以+1
    }
  }
  return null;
}

// 新增：根据ID批量获取对应行的所有字段
function getDataById(id) {
  var targetRow = getRowById(id);
  if (!targetRow) return { error: '未找到匹配ID的记录' };
  return {
    secteur: SHEET.getRange(targetRow, 2).getValue(),
    zone: SHEET.getRange(targetRow, 3).getValue(),
    salle: SHEET.getRange(targetRow, 4).getValue()
  };
}

// 修改：支持根据ID定位行写入数据
function setValue(id, inputValue) {
  var targetRow = getRowById(id);
  if (!targetRow) return { error: '未找到匹配ID的记录' };
  SHEET.getRange(targetRow, 5).setValue(inputValue);
  return { success: true };
}

2. HTML端完整代码 #

<body>
<h1 style="font-size:16px;text-align:center">Interface administrateur</h1>
<br>
<label for="input-box">Quel Id ?</label>
<input id="input-box" type="text">
<br>
<br>
<label for="secteur">Secteur :</label>
<input id="secteur" type="text">
<br>
<br>
<label for="zone">Zone :</label>
<input id="zone" type="text">
<br>
<br>
<label for="salle">Salle :</label>
<input id="salle" type="text">
<br>
<br>
<button id="get-value">Get value</button>
<br>
<br>
<label for="set-input">Quelle donnée à reporter </label>
<input id="set-input" type="text">
<br>
<br>
<button id="set-value">Set value</button>
<br>
<br>
<button onclick="google.script.host.close()">Close</button>

<script>
  var initVal = <?= initialValue ?>;
  document.getElementById('input-box').value = initVal;

  document.getElementById('get-value').addEventListener('click',function(){
    var inputId = document.getElementById('input-box').value.trim();
    if (!inputId) {
      alert('请输入要查询的ID');
      return;
    }
    google.script.run.withSuccessHandler(function(res){
      if (res.error) {
        alert(res.error);
        return;
      }
      document.getElementById('secteur').value = res.secteur;
      document.getElementById('zone').value = res.zone;
      document.getElementById('salle').value = res.salle;
    }).getDataById(inputId);
  });

  document.getElementById('set-value').addEventListener('click',function(){
    var inputId = document.getElementById('input-box').value.trim();
    var inputValue = document.getElementById('set-input').value.trim();
    if (!inputId) {
      alert('请先输入要写入的目标ID');
      return;
    }
    google.script.run.withSuccessHandler(function(res){
      if (res.error) {
        alert(res.error);
        return;
      }
      alert('数据写入成功');
      document.getElementById('set-input').value = '';
    }).setValue(inputId, inputValue);
  });

</script>
</body>

核心改动说明 #

• GS端新增了ID匹配行号的逻辑，无需固定行号读写
• 合并了原来分散的单字段查询接口，减少前端请求次数
• 新增了ID不存在的提示逻辑，避免无响应问题
• 读写操作均绑定输入的ID，自动定位到对应行执行操作

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