我有这个简单的网页它使用 google.visualization.Query 从中提取三个特定单元格的值电子表格,然后根据三个相应输入字段的唯一 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;
}
目前,我必须对要从中提取数据的每个单元格的行索引和列索引进行“硬编码”。我怎样才能让它搜索并从电子表格中检索数据?例如,如果我有一个简单的输入字段,我可以在其中输入名称,然后将返回“工作”和“小时”。这可能吗?
Thanks.
您可以使用Query.setQuery设置类似 SQL 的语句,
可用于选择某些列和行
以下将选择“工作和时间”列,其中“姓名”=“账单”
'select B, C where A = "Bill"'
您还可以搜索部分文本,这将选择 Bill 和 Kim
'select B, C where A like "%i%"'
以下是一个工作片段,输入的名称与列的名称相同
输入完整或部分名称,然后单击Search查看结果...
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)