【问题标题】:Using HTML file to Query a Google Spreadsheet using a Textbox for Query, using App Script使用 HTML 文件查询 Google 电子表格,使用文本框进行查询,使用 App 脚本
【发布时间】:2015-07-14 15:19:32
【问题描述】:

我有一个超过 1000 行的电子表格,每一列都是一个字段,其中一列有一个名为 Domain 的字段,“这将是我需要查询的值”,我使用 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 App Function Scripts 页面:

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());
}

我的问题是我不知道如何存储用户提交到文本框的信息,以便以后可以使用我在此处找到的 sn-p 搜索我的电子表格:

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
 }

任何想法我该如何实现这一目标?

谢谢

【问题讨论】:

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


    【解决方案1】:

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

    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);
    }
    

    【讨论】:

    • 嗨,很抱歉再次提问,但我想我在这里搞砸了:'
      '
    • 我不知道设置是否正确,我在 gs 上添加了一个名为 search() 的函数: function search() { var domain = index.html.form.domain; }
    • 嗨,很抱歉继续问问题,在.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); } 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); }
    • 我收到一条错误消息:TypeError: Cannot read property "domain" from undefined。 (第 21 行,文件“代码”)我还将代码放在 HTML 端:&lt;script&gt; //Put an anonymous function into the browsers window object window.callServer = function(myform) { google.script.run.search(myform); &lt;/script&gt; 并将表单修改为名称 myform:
    • &lt;form name="myform"&gt; &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt; &lt;input name='domain' class="mdl-textfield__input" type="text" id="sample3" /&gt; &lt;label class="mdl-textfield__label" for="sample3"&gt;Enter Domain&lt;/label&gt; &lt;input type="button" value="Not Clicked" onclick="callServer(this.parent.parent)"/&gt; &lt;/div&gt; &lt;/form&gt; 任何想法,我真的很抱歉一直问
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-20
    相关资源
    最近更新 更多