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

Question

我得到了这个simple webpage which uses google.visualization.Query to pull the values of three specific cells from this spreadsheet，然后根据它们唯一的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;
                
        }

目前，我必须对要从中提取数据的每个单元格的行索引和列索引进行“硬编码”。我怎样才能得到它来搜索电子表格中的数据并从中检索数据？例如，如果我有一个简单的输入字段，我可以在其中输入姓名，然后将返回“工作”和“工作时间”。这甚至可能吗？

谢谢。

Answer 1

你可以使用Query.setQuery来设置类似SQL的语句，
可用于 select 某些列和行

以下将 select 姓名 = Bill
的工作和时间列 'select B, C where A = "Bill"'

您还可以搜索部分文本，这 select Bill 和 Kim
'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>

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

How to Search Spreadsheet Using Google Visualization Query

javascript

google-visualization

google-spreadsheet-api