javascript - 使用 HTML 文件通过应用程序脚本通过文本框查询 Google 电子表格

标签 javascript html database google-apps-script google-sheets

我有一个电子表格,有 1000 多行,每一列都是一个字段,其中一列有一个名为“域”的字段,“这将是我需要查询的值”,我使用 HTML 的应用程序将需要使用文本框将 HTML 查询到函数,以搜索电子表格并返回 HTML 中同一行的值。

现在这是 HTML 代码:

<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

    <?!= include('WebPage.js'); ?>
    <?!= include('Style'); ?>
  </head>
  <body ng-app="webApp">
    <div ng-controller="webAppCtrl">
      <div>
        <md-toolbar class="md-theme-light">
          <div class="md-toolbar-tools">
            <div>DeLight App</div>
          </div>
        </md-toolbar>
    <div id="body">
    <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
      <div>
        <form action="#">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="sample3" />
            <label class="mdl-textfield__label" for="sample3">Enter Domain</label>
          </div>
        </form>
      </div>
    </div>
   <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
     <div id="leftContainer" class="md-whiteframe-z2" flex="50">
       <md-toolbar class="md-theme-light">
         <div class="md-toolbar-tools">
           <div>Customer Info</div>
         </div>
       </md-toolbar>
       Pull Customer Info here from Sheet
     </div>
     <div id= "rightContainer" class="md-whiteframe-z2" flex="50">
       <md-toolbar class="md-theme-light">
         <div class="md-toolbar-tools">
           <div>Task List</div>
         </div>
       </md-toolbar>
       <md-list-item>
         <p>Verified Domain Owner</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
       <md-list-item>
         <p>User Creation</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
       <md-list-item>
         <p>Dual Delivery</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
     </div>
   </div>
     </div>
      </div>
    </div>
  </body>
</html>

这是 Web 应用程序函数脚本页面:

function doGet(e) {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Test')
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

function testSheet(){
  var ss = SpreadsheetApp.openById("abc123456");
  Logger.log(ss.getName());
}

我遇到的问题是,我不知道如何存储用户提交到文本框的信息,以便稍后我可以使用我在此处找到的代码片段搜索我的电子表格,该代码片段是:

function test(){
 var sh = SpreadsheetApp.openById("abc123456");
 var data = sh.getDataRange().getValues(); // read all data in the sheet
 for(n=0;n<data.length;++n){ // iterate row by row and examine data in column A
 if(data[n][0].toString().match('searchvariable')=='searchvariable'){ data[n][5] = 'YES'};// if column A contains 'xyz' then set value in index [5] (is column F)
 }
 Logger.log(data)
 sh.getRange(1,1,data.length,data[0].length).setValues(data); // write back to the sheet
 }

有什么想法可以实现这个目标吗?

谢谢

最佳答案

您需要从表单中获取数据,然后将表单值发送到服务器端 .gs使用 google.script.run.myFunctionName() 的脚本函数。

google.script.run - Client Side API

有多种方法可以从输入字段中获取值。您可以获取整个表单,并将修改后的表单对象发送到服务器,也可以单独获取值。

如果您获取表单对象,Google 会更改表单对象。 .gs唯一方式函数可以通过使用 HTML name 从表单对象中获取值属性。换句话说,让表单对象策略发挥作用的唯一方法是为每个输入字段提供一个带有名称的名称属性。

<input name='myNameGoesHere' class="mdl-textfield__input" type="text" id="sample3" />

Google 文档显示将 google.script.run代码直接输入click输入按钮的属性。您可以尝试这种方式,或者将代码放入单独的脚本标记中。

<input type="button" value="Not Clicked"
    onclick="google.script.run
        .withSuccessHandler(updateButton)
        .withUserObject(this)
        .getEmail()" />

HTML 代码:

<script>
  //Put an anonymous function into the browsers window object
  window.callServer = function(theFormObject) {
    google.script.run
     .search(theFormObject);
</script> 

<form>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input name='domain' class="mdl-textfield__input" type="text" id="sample3" />
    <label class="mdl-textfield__label" for="sample3">Enter Domain</label>
    <input type="button" value="Not Clicked" onclick="callServer(this.parent.parent)"/>
  </div>
</form>

代码.gs

function search(myForm) {
  //Look in VIEW menu, and LOGS menu Item to see if the form was passed in
  Logger.log('myForm: ' + myForm);
  var domain = myForm.domain;
  Logger.log('domain: ' + domain);
}

关于javascript - 使用 HTML 文件通过应用程序脚本通过文本框查询 Google 电子表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410716/

相关文章:

javascript - 如何居中 jqPagination 小部件?

search - 如何在 webapp/网站上实现搜索

mysql - MySQL 中的链式比较得到意想不到的结果

sql - Python sqlite3错误-数据库已加密

javascript - 如果 URL 为空则隐藏 li 标签

javascript - 选项没有突出显示

c# - 重新绑定(bind)时我应该使用 Jquery- $.remove() 吗?

javascript - 在 chrome 中缩小到 25% 时,div 中的元素超出范围(不在 div 内)

html - 在图片背景上显示文字

jquery - 使用 jQuery 将列自动调整为具有相同的高度