在 Google 表格边栏中创建搜索

Question

我有一张表来跟踪大约 1400 个停车位，并且想在边栏中添加单独的搜索。我已经能够通过单击自定义菜单来显示侧边栏。在边栏中，我已经能够重命名它，添加搜索栏，并在栏下方添加搜索和关闭按钮。

我现在需要帮助，一旦用户在搜索栏中输入空格编号并单击搜索，它将获取该空格编号，查看 B 列并从该行收集以下信息并返回到侧边栏以下格式：

• B 列：'返回 B 列信息'
• C 列：'返回 C 列信息'
• D 列：'返回 D 列信息'
• E 列：'返回 E 列信息'
• F 列：'返回 F 列信息'
• G 列：'返回 G 列信息'
• 行号：'返回信息所在的行号'

以下是我现在拥有的代码。

菜单.gs

function onOpen() { 

SpreadsheetApp.getUi()
.createMenu('Sidebar')
.addItem('Show Sidebar', 'showSidebar')
.addToUi(); 
}

Sidebar.gs

function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('index')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('Individual Space Lookup');
SpreadsheetApp.getUi()
  .showSidebar(html);
}

function searchInfo() {

return ('test');    

}

index.html

<div>

Search Individual Space: <input type="search" />

<BR>

<input type="button" value="Search"
onclick="google.script.run.onSuccess()" />

<input type="button" value="Close"
onclick="google.script.host.close()" />

<script> 

function onSuccess(searchInfo) {

alert('Column B: ' + searchInfoColB
    <br>'Column C: ' + searchInfoColC
    <br>'Column D: ' + searchInfoColD
    <br>'Column E: ' + searchInfoColE
    <br>'Column F: ' + searchInfoColF
    <br>'Column G: ' + searchInfoColG
    <br>'Row Number: ' + searchInfoRowNum

    );
}

google.script.run.withSuccessHandler(onSuccess)
  .searchInfo(); 

</script>
</div>

Answer 1

你的第一个输入标签应该有一个“id”属性。这是为了检索输入值。

Search Individual Space: <input type="search" id="idUserInput"/>

您的按钮输入标签配置错误。你有：

<input type="button" value="Search"
  onclick="google.script.run.onSuccess()" />

应该是：

<input type="button" value="Search"
  onclick="myFunction()" />

您有一个带有 onSuccess 函数的 SCRIPT 标记，然后它使用 google.script.run 调用 Google 服务器函数。现在，您在两个地方调用服务器代码。

你的 SCRIPT 标签只有一个功能，它需要两个：

<script>

  function onSuccess() {
    alert('Column B: ' + searchInfoColB
      <br>'Column C: ' + searchInfoColC
      <br>'Column D: ' + searchInfoColD
      <br>'Column E: ' + searchInfoColE
      <br>'Column F: ' + searchInfoColF
      <br>'Column G: ' + searchInfoColG
      <br>'Row Number: ' + searchInfoRowNum
    );
  };

  function myFunction() {
    //Get the space number out of the input field
    var theSpaceNumber = document.getElementById("idUserInput").value;

    google.script.run.withSuccessHandler(onSuccess)
      .searchInfo(theSpaceNumber); 
  };

</script>

将停车位编号传递给 gs 函数

//Get the space number out of the input field
var theSpaceNumber = document.getElementById("idUserInput").value;

google.script.run.withSuccessHandler(onSuccess)
  .searchInfo(theSpaceNumber); 

以上代码用于您的 SCRIPT 标记中的客户端代码。在输入框中添加获取空格号的行，并将theSpaceNumber变量放入函数调用中。 .searchInfo(theSpaceNumber);

下面是如何启动服务器端代码的概要：

获取对您要访问的电子表格的引用：

var ss = SpreadsheetApp.openById("theSpreadsheet ID");
//Logger.log(ss.getName());

获取您需要访问的工作表的参考：

var sheetWithData = ss.getSheetByName("Sheet Name Here");

获取要经过的行数：

var numOfRowsInSheet = sheetWithData.getLastRow();

所以，到目前为止，你会得到这个：

function searchInfo(argSpaceNumber) {
  var ss = SpreadsheetApp.openById("theSpreadsheet ID");
  //Logger.log(ss.getName());
  var sheetWithData = ss.getSheetByName("Sheet Name Here");
  var numOfRowsInSheet = sheetWithData.getLastRow();

  return ('test');    
};

现在您需要确定获取初始数据的最佳方法是什么。您是要获取一大块数据，还是要逐个单元格地挑选数据？好吧，您需要的所有数据都在连续的列中，这使它更容易。而且你只得到一行数据，这样就更容易了。但问题是，什么停车位与哪一排相关联？我将假设您在 A 列中有停车位编号。因此您需要找到停车位编号所在的行号。

获取 A 列中的所有数据

var values = sheetWithData.getSheetValues(1, 1, numOfRowsInSheet, 1);
Logger.log(values);

在 A 列中查找空格数

//Convert two dimensional array to one dimensional array.
var theRowValues = [];

for (var i = 0; i < values.length; i++) {
   theRowValues.push(values[i]);
};

var rowWithSpaceNumber = theRowValues.indexOf(argSpaceNumber.toString());
Logger.log("rowWithSpaceNumber: " + rowWithSpaceNumber);

从行中取出所有值

//Get 6 columns of data:  getSheetValues(startRow, startColumn, numRows, numColumns)
var theRowData = sheetWithData.getSheetValues(rowWithSpaceNumber, 2, 1, 6);

进行这些更改，测试和调试代码，如果您有任何错误，请发布另一个带有错误消息和/或返回结果和预期结果的问题。

使用 debug 和/或 Logger.log() 语句来调试您的代码。