Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active December 9, 2023 11:57
Show Gist options
  • Save neno-tech/249518f086ee53a8fddf77fc91076ea7 to your computer and use it in GitHub Desktop.
Save neno-tech/249518f086ee53a8fddf77fc91076ea7 to your computer and use it in GitHub Desktop.
Download ZIP
ตอนที่ 1 ระบบค้นหาข้อมูลใน Google Sheet 2021
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function processForm(formObject){
var result = "";
if(formObject.searchtext){
result = search(formObject.searchtext);
}
return result;
}
function search(searchtext){
var spreadsheetId = 'xxx';
var dataRage = 'แผ่น1!A2:D';
var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
var ar = [];
data.forEach(function(f) {
if (~f.indexOf(searchtext)) {
ar.push(f);
}
});
return ar;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
body {
font-family: "Mitr"
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col ">
<div class="row">
<div class="col-md-4 mx-auto">
<div class="card text-center">
<div class="card-header">
ระบบค้นหาข้อมูล
</div>
<div class="card-body">
<!-- ## ฟอร์มค้นหา------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">กรุณากรอกข้อมูลที่ต้องการค้นหา</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="พิมพ์ที่นี่">
</div>
<button type="submit" class="btn btn-primary mb-2">ค้นหา</button>
</form>
<!-- ## ปิดฟอร์ม ------------------------------------------- -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- ## สร้างตาราง ------------------------------------------------ -->
<div id="search-results" class="table-responsive">
<!-- แสดงข้อมูลที่นี่ -->
</div>
<!-- ## จบตาราง ------------------------------------------------ -->
</div>
</div>
</div>
<!--##JAVASCRIPT ---------------------------------------------------- -->
<script>
window.addEventListener("load", preventFormSubmit, true);
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
//ทำการส่งค่าจากฟอร์ม
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
}
//สร้างตารางและข้อมูลในตาราง
function createTable(dataArray) {
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var result = "<table class='table table-sm table-striped table-hover' id='dtable'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+
"<th scope='col'>เลขที่"+
"<th scope='col'>ชื่อ สกุล</th>"+
"<th scope='col'>ชื่อเล่น</th>"+
"<th scope='col'>เบอร์โทร</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
var div = document.getElementById('search-results');
div.innerHTML = result;
}else{
var div = document.getElementById('search-results');
//div.empty()
div.innerHTML = "ไมพบข้อมูลที่ค้นหา!";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment