如何使用Google可视化查询搜索电子表格

时间:2016-07-27 02:45:47

标签: javascript google-visualization google-spreadsheet-api

我有simple webpage这个spreadsheet使用google.visualization.Query从此view中提取三个特定单元格的值,然后基于此设置三个相应输入字段的值他们独特的id属性。

    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(work);

    function work() {
    var queryWORK = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY');

    queryWORK.send(handleQueryResponse);
    }
    function handleQueryResponse(response) {
            if (response.isError()) {
                alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }

    var datatable = response.getDataTable();    
    var name = datatable.getValue(1,0);
    var job = datatable.getValue(1,1);
    var hours = datatable.getValue(1,2);

        document.getElementById('name_out').value = name;
        document.getElementById('job_out').value = job;
        document.getElementById('hours_out').value = hours;

        }

就像目前一样,我必须"硬代码"我要从中提取数据的每个单元格的行索引和列索引。如何从电子表格中搜索和检索数据?例如,如果我有一个简单的输入字段,我可以在其中输入一个名称和" job"和"小时"将被退回。这甚至可能吗?

感谢。

1 个答案:

答案 0 :(得分:1)

您可以使用Query.setQuery设置类似SQL的语句,
可用于选择某些列和行

以下将选择Job&小时列名称=比尔
'select B, C where A = "Bill"'

你也可以搜索部分文字,这将同时选择比尔和金 'select B, C where A like "%i%"'

以下是工作代码段,输入的名称与列

相同

输入完整或部分名称,然后点击搜索以查看结果...

google.charts.load('current', {
  callback: function () {
    document.getElementById('Search').addEventListener('click', searchSheet, false);
    searchSheet();

    function searchSheet() {
      searchText = document.getElementById('Name').value;

      var queryWORK = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY');
      if (searchText !== '') {
        queryWORK.setQuery('select B, C where A like "%' + searchText + '%"');
      }

      queryWORK.send(function (response) {
        if (response.isError()) {
          console.log('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var datatable = response.getDataTable();
        for (var i = 0; i < datatable.getNumberOfColumns(); i++) {
          document.getElementById(datatable.getColumnLabel(i)).value =
            (datatable.getNumberOfRows() > 0) ? datatable.getValue(0, i) : '';
        }

        var chart = new google.visualization.Table(document.getElementById('table_div'));
        chart.draw(datatable);
      });
    }
  },
  packages:['table']
});
div {
  padding: 6px 6px 6px 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div><label for="Name">Enter Name: </label><input id="Name" type="text" value="Bill" /></div>
<div><input id="Search" type="button" value="Search" /></div>
<div><label for="Name">Job: </label><input id="Job" type="text" /></div>
<div><label for="Name">Hours: </label><input id="Hours" type="text" /></div>
<div id="table_div"></div>