按钮使用谷歌应用程序脚本从电子表格中检索数据的操作

时间:2017-08-24 14:35:38

标签: javascript button google-apps-script

如何根据操作上的过滤器(例如点击按钮)从电子表格中检索完整的行。

我读到GAS是服务器端脚本,访问电子表格很复杂。

是这样的。请指导我。

我做到了这一点:

 $("#form-action")
    .button()
    .click(function() {

 var ss = SpreadsheetApp.openById("");
var sheet = SpreadsheetApp.getActiveSpreadsheet();
SpreadsheetApp.setActiveSheet(sheet.getSheetByName('Test'));
SpreadsheetApp.getActiveSheet().getRange("D1").setFormula('Query(A:C,"SELECT A,B,C WHERE B="' + "mydata'" + ',1)'); 
SpreadsheetApp.getActiveSheet().getRange("E:J").getValues();

});

1 个答案:

答案 0 :(得分:1)

获得对电子表格的访问并不困难。您必须记住,当Google Apps脚本在Google服务器上运行时,客户端代码(例如您在UI模板中使用的HTML和JavaScript代码)将被发送到您的浏览器进行渲染,因此您无法将两者完全混合并在GAS(.gs)文件中编写jQuery代码,反之亦然。

澄清,像

这样的命令
 var ss = SpreadsheetApp.openById("");

必须保存在.gs文件中。要使用客户端HTML和JavaScript,您必须在项目中创建单独的HTML文件(转到文件 - 新建 - HTML文件)。以下是有关在GAS https://developers.google.com/apps-script/guides/html/

中提供HTML的更多信息

幸运的是,Google提供的API允许您通过调用“google.script.run”在客户端和服务器端之间进行通信。后跟'.gs'文件中函数的名称。

'.gs'文件中的示例函数

function addRow() {

var sheet = SpreadsheetApp.getActive()
                          .getSheets()[0];

sheet.appendRow(['Calling', 'server', 'function']);

}

在HTML模板文件中,以下是调用此函数的方法

<script>
    google.script.run.addRow();
</script>

考虑与您的情况更相关的示例。在我的电子表格中,QUERY公式根据用户输入的值动态更改。带有输入字段的表单显示在侧栏中。

enter image description here

项目结构

enter image description here

'sidebar.html'的代码如下。请注意,使用&lt; input&gt;的'name'属性元素是强制性的。在表单提交时,属性('filterBy')的值将转换为表单对象的propetry,我们可以在服务器函数中引用它以获取用户输入。

    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
      </head>
      <body>
        <form id="myForm">

        <input type="text" name="filterBy">

        <input type="submit" value="submit">

        </form>

        <table id="myTable"></table>

        <script>

        $('document').ready(function(){

         var form = $('#myForm');
         var table = $('#myTable');
         var runner = google.script.run;

         form.on('submit', function(event){

            event.preventDefault(); //prevents <form> redirecting to another page on submit
            table.empty(); // clear the table

            runner.withSuccessHandler(function(array){ //this callback function will be invoked after the 'retriveValues()' function below

            for (var i = 0; i < array.length; i++) {

             var item = '<tr><td>' + array[i] +'</td></tr>';
             table.append(item);


            }


            })
               .retrieveValues(this); //the function that will be called first. Here, 'this' refers to the form element


         });



        });


        </script>
      </body>
    </html>

'.gs'文件中的代码:

var ss = SpreadsheetApp.getActive();
var sheet = ss.getSheets()[0];


function onOpen() {

var ui = SpreadsheetApp.getUi();
var htmlOutput = HtmlService.createTemplateFromFile('sidebar')
                          .evaluate();

ui.showSidebar(htmlOutput);

}


function retrieveValues(req) {

var res = [];  
var filterBy = req.filterBy; //getting the value of the input field. 

sheet.getRange(1, 2, 1, 1)
     .setFormula("QUERY(A1:A, \"SELECT A WHERE A > " + filterBy + "\")");


sheet.getRange(1, 2, sheet.getLastRow(), 1)
     .getValues()
     .map(function(value){

                     if (value[0] != "") res = res.concat(value[0]); // get only the values that are not empty strings. 

                  });

return res;  


}

这是输入值并提交表单的结果。服务器端函数返回大于5的值数组。我们作为参数传递给'withSuccessHandler'的回调函数然后接收该数组并填充侧栏中的表。

enter image description here

最后,我不确定你为什么要使用QUERY公式。您可以简单地从目标范围中取值并在GAS中过滤它们,而不是修改“SELECT”语句。