如何将 html 数据从 Google 侧边栏传递到 gs 代码中的变量

Question

我有一张表格，可以根据一组目标跟踪学生的进度 - 学生姓名在顶部，目标在左侧列出。每个学生都在一个组中 - 在下面的示例中，组由 SK、IO 和 NU 表示。

我创建了一个带有各种过滤器的侧边栏。

我遇到的问题是用户将在其中输入组名的过滤器，当单击过滤器按钮时，所有列都将隐藏，除了包含输入组名的列。我有以下代码：

来自 .gs 表：

function showGroup(group) {
  for(var i=2; i<lastCol-36; i++) {
    if(data.getCell(8, i).getValue() != group) { 
    sheet.hideColumns(i);
    }
  }
} 

来自 html 表单：

<form id="filterGroups" >
   <input type="text" value="" id="groupName">
   <input type="button" value="Filter"
     onclick="google.script.run.showGroup(filterGroups)" />

我最接近成功的方法是隐藏所有列，只要表单 id 与传递给 google.script.run 的参数匹配。

Answer 1

• 您只想显示具有用户输入值的列。并且您想隐藏除它们之外的其他列。
• 用户输入的值位于工作表“Science Year Group”的第 8 行。

如果我对你的问题的理解是正确的，那么这次修改怎么样？

修改点：

• 如果在文本框中输入多个字符串 (SK, NU)，if(data.getCell(8, i).getValue() != group){} 始终为 false。
• 为文本框命名为name="groupName"。使用它，它在 GAS 端使用 group.groupName 检索值。
  • 如果没有给出名称，您可以使用group[""] 检索值。
• 感觉在for循环中使用sheet.hideColumns(i)时，处理成本高。因此，我针对您的情况使用了 Sheets API。
  • 这样，每列的隐藏和显示可以通过一个 API 调用来控制。
  • 首先，为了使用 Sheets API，请在 Advanced Google Services 和 API 控制台中启用 Sheets API。您可以在 here 了解如何启用 Sheets API。

修改脚本：

气体

function showGroup(group) {
  var unhide = group.groupName.split(",").map(function(e){return e.trim().toUpperCase()});
  var values = sheet.getRange(8, 2, 1, (lastCol - 36) - 2).getValues()[0];
  var template = {updateDimensionProperties:{properties:{},range:{sheetId:sheet.getSheetId(),dimension:"COLUMNS"},fields:"hiddenByUser"}};
  var r = values.map(function(e, i) {
    var t = JSON.parse(JSON.stringify(template));
    if (~unhide.indexOf(e)) {
      t.updateDimensionProperties.properties.hiddenByUser = false;
    } else {
      t.updateDimensionProperties.properties.hiddenByUser = true;
    }
    t.updateDimensionProperties.range.startIndex = i + 1;
    t.updateDimensionProperties.range.endIndex = i + 2;
    return t;
  });
  Sheets.Spreadsheets.batchUpdate({"requests": r}, ss.getId());
}

HTML

<form id="filterGroups" >
  <input type="text" value="" id="groupName" name="groupName">
  <input type="button" value="Filter" onclick="google.script.run.showGroup(filterGroups)">
</form>

注意：

• 在这个修改后的脚本中，当SK, NU 放在文本框中时，只显示带有SK, NU 的列。其他列被隐藏。

参考：

• UpdateDimensionPropertiesRequest

如果我误解了你的问题，请告诉我。我想修改它。

编辑：

关于您的评论Can you show me how to pass html form data to GAS functions?，我向您展示了一个使用您的 HTML 表单的示例脚本。 HTML表单如下。

HTML

在此示例中，使用google.script.run() 将值发送到showGroup(filterGroups)。

<form id="filterGroups" >
  <input type="text" value="" id="groupName" name="groupName">
  <input type="button" value="Filter" onclick="google.script.run.showGroup(filterGroups)">
</form>

气体

在此示例中，来自 HTML 表单的值由 group.groupName 检索。

function showGroup(group) {
  Logger.log(group.groupName)
}