Web Apps ระบบคันหาแสดงข้อมูลตามหมวดหมู่

bysemicon -
0

     ในบทความนี้ เราจะแสดงให้คุณเห็นว่าคุณสามารถดึงข้อมูลจาก GoogleSheet มาแสดงตามหมวดหมู่ได้อย่างไร หวังว่าบทความนี้จะประโยชน์ช่วยให้คุณนำไปประยุกต์ใช้กับโปรเจ็กต์ของท่านต่อไป 

ตัวอย่างชีต



index.html


<!DOCTYPE html>
<html>
<title>Select a category to show related data</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="w3-row-padding w3-border-bottom">
<div class="w3-col s5">
    <select id="cls"onchange="list()"class="w3-select w3-col s8">
    <option value="">CLASS</option>
    <option value="Nur">Nursery</option>
    <option value="LKG">LKG</option>
    <option value="UKG">UKG</option>
    <option value="I">I</option>
    <option value="II">II</option>
    <option value="III">III</option>
    <option value="IV">IV</option>
    <option value="V">V</option>
    <option value="VI">VI</option>
    <option value="VII">VII</option>
    <option value="VIII">VIII</option>
    <option value="Pending">Pending</option>
    <option value="Leaved">Leaved</option>
    </select>
    <select id="typ" onchange="list()"class="w3-select w3-col s4">  
    <option value="ALL">ALL</option>
    <option value="Advance">Advance</option>
    <option value="Dues">Dues</option>
    </select>
</div>
<div class="w3-col s1 w3-center">
<i id=
  "spin" class="fa fa-refresh fa-0"onclick="list()" style="font-size:20px"></i>
</div>
<div class="w3-col s4 w3-left">
<i id="info"></i>
</div>
<div class="w3-col s1 w3-right">
<input type="button" name
  ="btnprint" value="Print" onclick="pPrint('result')"
class="w3-btn w3-teal w3-hover-red">
</div>
</div>
<div style="overflow: auto;height:520px;">
<div id="result"align="center"></div></div>
 <script>
    function list() { 
     var cl   = document.getElementById('cls');
     var clv  = cl.options[cl.selectedIndex].value;
     var typ  = document.getElementById('typ');
     var tyv  = typ.options[typ.selectedIndex].value;
     var spn  = document.getElementById('spin');
     var info = document.getElementById('info');
     var resu = document.getElementById('result');

     if(clv === ""){
     info.innerHTML = "";
     }else{
     function fail(error){
     resu.innerHTML = "<span style='color:red'>"+error+"</span>";
     spn.classList.remove('fa-spin');
     info.innerHTML = "";
     };
     function pass(list){
     resu.innerHTML = list;
     spn.classList.remove('fa-spin');
     var rc =document.getElementById('table').rows.length-1;
     info.innerHTML = rc+" Records found.";
     };
     resu.innerHTML = "";
     spn.classList.add('fa-spin');
     info.innerHTML = "Working on...";
     google.script.run.withFailureHandler(fail).withSuccessHandler(pass).iList(clv,tyv);
    }
  };
 </script>
</body>

</html>  


code.gs


function doGet(e) {
  return HtmlService.createTemplateFromFile('index').evaluate();
  }

function iList(clv,tyv){
var ss = SpreadsheetApp.openById("1EmyJvd0afqxLYCmfI_gFoO0GLZQVtPDz1fvndKvW7Pg");
var ws = ss.getSheetByName("Users");
var dl = ws.getDataRange().getValues();
var tb = "";
var hd ='<table id=table class="w3-table-all w3-hoverable"><tr class="w3-red"><th>ID No.</th>
<th>Name</th>
  <th>Village</th><th>Contact</th><th>Class</th><th>Balance</th></tr>';
for(var i=0; i<dl.length ; i++){
if(tyv == "ALL") { var sv = dl[i][7]+"!=''";}else{ var sv = dl[i][7] == tyv;};
if(clv == dl[i][5] && sv){ 
tb+="<tr><td><b>"+dl[i][0]+"</b></td><td>"+dl[i][1]+"</td><td> "+dl[i][4]+"</td><td> "+
dl[i][2]+"</td><td>"+dl[i][5]+"</td><td> "+dl[i][6]+" "+
  dl[i][7]+"</td></tr>";
}};
return hd+tb;
}

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า