如何使用Google可视化查询搜索电子表格 - 基于多重搜索条件

时间:2016-07-27 22:35:18

标签: javascript html google-visualization

我在下面的Google可视化查询脚本中使用 Query.setQuery 来搜索这个简单的spreadsheet。该脚本通过列A查找输入到html输入字段中的名称,然后匹配该人员的相应作业和小时(来自其他列)并将这些数据返回到html输入字段。 (感谢论坛成员 WhiteHat 寻求帮助!)



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

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

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

		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']
});
&#13;
div {
  padding: 6px 6px 6px 6px;
}
&#13;
<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="Job">Job: </label><input id="Job" type="text" /></div>
<div><label for="Hours">Hours: </label><input id="Hours" type="text" /></div>
<div id="table_div"></div>
&#13;
&#13;
&#13;

我现在要做的是添加另一个搜索条件,然后将匹配发送到通用&#34;结果&#34; html输入字段。搜索需要始终查看电子表格的A列和第1行中的单元格以查找匹配项。

例如,如果在第一个搜索字段中输入 Janet ,在第二个字段中输入作业,我就像烹饪将在&#34;结果&#34;中返回输入字段。或者说我输入 Adam Hours ,然后应该返回 1.5 的匹配。

Cell A1将始终包含相同的数据(&#34; Name&#34;);然而,我不会提前知道第1行剩余单元格的内容(B1,C1,D2 ......),因为这些将会改变。

任何想法???感谢

1 个答案:

答案 0 :(得分:1)

您可以使用星号返回所有列

'select * where A = "' + searchText + '"'

然后使用与以前类似的逻辑来查找请求的列

请参阅以下工作代码段...

&#13;
&#13;
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 * where A = "' + 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++) {
          var field = document.getElementById('Field').value;
          if (datatable.getColumnLabel(i) === field) {
            document.getElementById('Result').value = (datatable.getNumberOfRows() > 0) ? datatable.getValue(0, i) : '';
          }
        }

        var chart = new google.visualization.Table(document.getElementById('table_div'));
        chart.draw(datatable);
      });
    }
  },
  packages:['table']
});
&#13;
div {
  margin: 6px 6px 6px 6px;
}
&#13;
<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><label for="Field">Field: </label><input id="Field" type="text" value="Job" /></div>
<div><input id="Search" type="button" value="Search" /></div>
<div><label for="Result">Result: </label><input id="Result" type="text" /></div>
<div id="table_div"></div>
&#13;
&#13;
&#13;