如何解决如何在Javascript中建立与Google Spreadsheet关联的多个过滤器
如果我从Google Spreadsheet中提取数据,如何在JavaScript中进行多个过滤?
GS代码
var getTable = function(){
var url = "someURL";
var script = SpreadsheetApp.openByUrl(url);
var temp = HtmlService.createTemplateFromFile("table");
var html = temp.evaluate().setWidth(1200).setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html,"Leave Application");
}
var include = function(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
var getTableData = function(){
var url = "SomeURL";
var script = SpreadsheetApp.openByUrl(url);
var ss = script.getSheetByName("Script");
var data = ss.getRange(2,2,ss.getLastRow()-1,9).getDisplayValues();
return data;
}
HTML代码:
<head>
<?!= include("table-css");?>
</head>
<body>
<div>
<select id="name">
<option disabled selected>Choose Name</option>
<option>John</option>
<option>Doe</option>
<option>Jane</option>
</select>
<label>Name Selection</label>
</div>
<div class="input-field col s3 right">
<div>
<i id="pending" class="material-icons i1">label_outline</i>
<i id="approve" class="material-icons i2">done_all</i>
<i id="reject" class="material-icons i3">clear</i>
<i id="notify" class="material-icons i4">error</i>
</div>
<div>
<table style="width:100%" id="myTable";>
<thead>
<tr>
<th>Name</th>
<th>Type of Leave</th>
<th>From</th>
<th>Until</th>
<th>Status</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
JavaScript代码:
document.addEventListener("DOMContentLoaded",function(){
google.script.run.withSuccessHandler(generateTable).getTableData();
});
function generateTable(dataArray){
dataArray.forEach(function(r){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[1];
var col2 = document.createElement("td");
col2.textContent = r[2];
row.appendChild(col1);
row.appendChild(col2);
tbody.appendChild(row);
getTableData()只是GS代码中的一个函数,可以从电子表格中返回数据。
它看起来像这样:
然后我用它来启动过滤器;
name.onchange = function(){
for(var i=1; i<table.rows.length; i++){
if(table.rows[i].cells[0].textContent === this.value){
console.log(table.rows[i].cells[0].textContent);
table.rows[i].style.display = "";
}else{
table.rows[i].style.display = "none";
}
}
}
var pending = document.getElementById("pending");
pending.onclick = function(){
for(var i=1; i<table.rows.length; i++){
if(table.rows[i].cells[4].textContent === "Pending"){
table.rows[i].style.display = "";
}else{
table.rows[i].style.display = "none";
}
}
}
它对于单个过滤器工作正常,但是如何将两者结合在一起,以便我可以根据名称和状态进行过滤?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。