code.gs
function doGet() {
var htmlOutput = HtmlService.createTemplateFromFile('index');
const userEmail = Session.getActiveUser().getEmail();
// htmlOutput.email = userEmail;
return htmlOutput.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setFaviconUrl('https://ik.imagekit.io/kmpeld0nh/GoshenN%20(3).png')
.setTitle('บันทึกข้อมูล ทีมรับใช้ประจำสัปดาห์')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
// return HtmlService.createTemplateFromFile('index').evaluate()
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getData() {
// const userEmail = Session.getActiveUser().getEmail();
// var sourceSheetName = "v------------t"; // Replace with the name of the source sheet
// var sourceSheet = SpreadsheetApp.openById("1g-------------------Q").getSheetByName(sourceSheetName);
// var obj = sourceSheet.getDataRange().getDisplayValues().slice(1)
// var data ={}
// obj.forEach(([colA,colB,colC])=>{
// const firstCol = data[colA]
// if(!firstCol){
// data[colA] = {}
// data[colA][colB] = [colC]
// }else{
// const secondCol = firstCol[colB]
// if(!secondCol){
// firstCol[colB] = [colC]
// }else{
// secondCol.push(colC)
// }
// }
// })
// Logger.log(data)
// return data
}
function uploadFile(blob) {
// ตรวจสอบขนาดของไฟล์ก่อนที่จะอนุญาตให้อัปโหลด
if (blob.getBytes().length > 1000000) { // ขนาดไม่เกิน 1 MB
return "ขนาดไฟล์เกินจากที่กำหนด";
}
// ทำอะไรกับไฟล์ที่ถูกอัปโหลด ที่นี้คุณสามารถบันทึกไฟล์ลงใน Google Drive หรือทำอะไรก็ตามตามที่คุณต้องการ
// ตัวอย่าง: saveFileToDrive(blob);
// return "อัปโหลดไฟล์สำเร็จ";
}
function saveData(obj) {
// const userEmail = Session.getActiveUser().getEmail();
var ss = SpreadsheetApp.openById('1Z-------------------w');
var sheet = ss.getSheetByName('ก---------------------ช้');
var lastRow = sheet.getLastRow();
var folder = DriveApp.getFolderById("1c--------------------------PI"); //แก้เป็นไอดีโฟลเดอร์ของเรา
var file, file2 = ''
var rowData = [
// new Date(),
lastRow,
obj.data1,
obj.data2,
obj.data3,
obj.data4,
obj.data5,
obj.data6,
obj.data7,
obj.data8,
obj.data9,
obj.data10,
obj.data11,
obj.data12,
obj.data13,
obj.data14
// userEmail
];
if (obj.imagedata) {
Object.keys(obj.imagedata).forEach(key => {
Logger.log(key)
let image = obj.imagedata[key]
let datafile = Utilities.base64Decode(image.data)
let blob = Utilities.newBlob(datafile, image.type, image.name);
file = folder.createFile(blob).getUrl()
rowData.push(file)
})
}
SpreadsheetApp.openById("1Z----------------------------w").getSheetByName('การรับใช้').appendRow(rowData);
// SpreadsheetApp.openById("1IP--------------------------a5w").getSheets()[0].appendRow(rowData);
return true
}
var ss= SpreadsheetApp.openById("1Z----------------------------------w");
function getData3(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData4(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData5(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData6(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData7(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData8(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData9(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData10(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData11(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData12(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData13(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
function getData14(){
var detial = ss.getSheetByName("detial").getRange('D2:D').getValues()
return detial;
}
// function getData3(){
// var detial = ss.getSheetByName("detial").getRange('I2:I').getValues()
// // var detial = ss.getSheets()[1].getRange('J2:J').getValues()
// return detial;
// }
*******************
index.html
-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Prompt" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
body { font-family: 'Prompt' !important; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css
" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com
" />
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap
" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css
" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css
" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
crossorigin="anonymous" />
<style>
body {
font-family: "Prompt", sans-serif
}
</style>
<?!=include('css')?>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
<style>body{font-family: 'Prompt';}
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--AutoComplete-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Niramit:wght@400&display=swap" rel="stylesheet">
<link href="https://ltschool.web.app/css/Bootstrapcolor.css" rel="stylesheet" type="text/css">
<style>
body {
font-family: 'Prompt', sans-serif;
}
</style>
<style>
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.ui-autocomplete>li>div {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
cursor: pointer;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
<?!=include('css')?>
</head>
<body>
<div class="card">
<div class="card-header h5 bg-danger text-white">
<i class="fas fa-sign-in-alt"></i>มธ. 11:12 และตั้งแต่สมัยยอห์นผู้ให้บัพติศมาถึงทุกวันนี้ แผ่นดินสวรรค์ก็ถูกโจมตีอย่างรุนแรง และพวกที่รุนแรงพยายามชิงเอาให้ได้
พระเจ้าอวยพระพร นะครับ
</div>
<div class="card-body">
<div class="container">
<div class="jumbotron bg-white d-flex align-items-center min-vh-100 justify-content-center">
<!-- <div class="row"> -->
<div class="col-md-6">
<!-- -------------------------------เริ่มฟอร์ม------------------------------------------ -->
<form id="myForm" onsubmit="submitForm()">
<p class="h3 mb-4 text-center"><i class="fas fa-chalkboard-teacher"></i> ฟอร์มบันทึกข้อมูล ทีมรับใช้ประจำสัปดาห์ คริสตจักรชิโลห์ จังหวัดบุรีรัมย์</p>
<!-- -------------------------------ชื่อ + สกุล------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="dateregist"><i class="fas fa-user-plus"></i> วันเดือนปี รับใช้</label>
<input type="date" class="form-control" id="data1" placeholder="วัน เดือน ปี" required>
</div>
<div class="form-group col-md-6">
<label for="temperater"><i class="fa-solid fa-users"></i> ทีม รับใช้ </label>
<select id="data2" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="ถือถุงถวาย">ถือถุงถวาย</option>
<option value="ปฏิคม">ปฏิคม</option>
<option value="นมัสการทีมอนุชน">นมัสการทีมอนุชน</option>
<option value="นมัสการทีมผู้ใหญ่">นมัสการทีมผู้ใหญ่</option>
<option value="อาหาร">อาหาร</option>
<option value="จัดดอกไม้">จัดดอกไม้</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i> ชื่อ สกุล คนที่ 1</label>
<input type="text" class="form-control" id="data3" placeholder="เลือกชื่อ สกุล คนที่ 1." required>
</div>
<div class="form-group col-md-6">
<label for="place"><i class="fas fa-user-plus"></i> ชื่อ สกุล คนที่ 2 </label>
<input type="text" class="form-control" id="data4" placeholder="เลือกชื่อ สกุล คนที่ 2" required>
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="place"><i class="fa fa-btc"></i> ชื่อ สกุล คนที่ 3</label>
<input type="text" class="form-control" id="data5" placeholder="เลือกชื่อ สกุล คนที่ 3...">
</div>
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 4</label>
<input type="text" class="form-control" id="data6" placeholder="เลือกชื่อ สกุล คนที่ 4" >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 5 </label>
<input type="text" class="form-control" id="data7" placeholder="เลือกชื่อ สกุล คนที่ 5" >
</div>
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 6 </label>
<input type="text" class="form-control" id="data8" placeholder="เลือกชื่อ สกุล คนที่ 6" >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 7 </label>
<input type="text" class="form-control" id="data9" placeholder="เลือกชื่อ สกุล คนที่ 7" >
</div>
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 8 </label>
<input type="text" class="form-control" id="data10" placeholder="เลือกชื่อ สกุล คนที่ 8 " >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 9 </label>
<input type="text" class="form-control" id="data11" placeholder="เลือกชื่อ สกุล คนที่ 9" >
</div>
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 10 </label>
<input type="text" class="form-control" id="data12" placeholder="เลือกชื่อ สกุล คนที่ 10 " >
</div>
</div>
<div class="row my-3">
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 11 </label>
<input type="text" class="form-control" id="data13" placeholder="เลือกชื่อ สกุล คนที่ 11" >
</div>
<div class="form-group col-md-6">
<label for="name"><i class="fas fa-book-reader"></i>ชื่อ สกุล คนที่ 12 </label>
<input type="text" class="form-control" id="data14" placeholder="เลือกชื่อ สกุล คนที่ 12 " >
</div>
</div>
<div class="row my-3">
<!-- <div class="form-group col-md-6">
<label for="regist"><i class="fas fa-user-graduate"></i> ผู้บันทึกข้อมูล </label>
<select id="data11" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="นางสาวปิติพร คุ้มกลาง">นางสาวปิติพร คุ้มกลาง</option>
<option value="นางสาวณัฐชยาณ์ สุขยิ่ง">นางสาวณัฐชยาณ์ สุขยิ่ง</option>
<option value="คนรักพระเจ้า">คนรักพระเจ้า</option>
<option value="คนรักพระเจ้า">คนรักพระเจ้า</option>
<option value="คนรักพระเจ้า">คนรักพระเจ้า</option>
<option value="คนรักพระเจ้า">คนรักพระเจ้า</option>
</select>
</div> -->
<div class="form-group col-md-6">
<label for="check_site"><i class="fas fa-bong"></i> เช็คขนาดทุกไฟล์ ก่อน Upload </label>
<input type="file" id="fileInput" onchange="handleFileChange()">
<div id="result"></div>
<script>
function handleFileChange() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var resultDiv = document.getElementById('result');
// ตรวจสอบขนาดของไฟล์ก่อนที่จะอัปโหลด
if (file.size > 1000000) { // ขนาดไม่เกิน 1 MB
resultDiv.innerHTML = "ขนาดไฟล์เกินจากที่กำหนด";
return;
}else{
resultDiv.innerHTML = "ขนาดไฟล์พอดี";
}
// // ทำการอัปโหลดไฟล์
// var formData = new FormData();
// formData.append('file', file);
// google.script.run.withSuccessHandler(function (response) {
// resultDiv.innerHTML = response;
// }).uploadFile(formData);
}
</script>
</div>
</div>
<div class="row my-3">
<!-- -------------------------------อัปโหลดไฟล์1------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> ภาพทีมฯ</label>
<input class="form-control" type="file" name="uploadfile" id="imageidcard">
</div>
<!-- </div> -->
<!-- -------------------------------อัปโหลดไฟล์2------------------------------------------ -->
<!-- <div class="form-group my-3"> -->
<!-- <div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i>ภาพวันมาครั้งแรก</label>
<input class="form-control" type="file" name="uploadfile" id="imagebank">
</div> -->
<!-- </div> -->
</div>
<!-- -------------------------------บันทึกข้อมูล------------------------------------------ -->
<div class="form-group text-center my-3">
<button type="submit" class="btn btn-primary btn-block" id="btn1"><i class="fas fa-cloud-upload-alt"></i> บันทึกข้อมูล</button>
</div>
<div class="form-group">
<button class="btn btn-primary" id="btn2" type="button" disabled style="display : none">
<span class="spinner-grow spinner-grow-sm" role="status" ></span>
กำลังอัปโหลด...
</button>
</div>
</form>
<!-- -------------------------------จบฟอร์ม------------------------------------------ -->
</div>
</div>
</div>
</div>
<div class="card-footer bg-info text-center text-white"><i class="fab fa-pagelines"></i>
ขอพระพักตร์พระองค์ทอแสงเหนือข้าพระองค์ทั้งหลาย ขอทรงช่วยข้าพระองค์ให้รอดด้วยความรักมั่นคงของพระองค์ พระเจ้าอวยพระพร นะครับ
</div>
</div>
<!-- -------------------------------JAVASCRIPT------------------------------------------ -->
<script>
let imagedata ={}
$('input[type="file"]').on('change',function(){
let files = []
for(var i=0; i<$(this)[0].files.length; i++){
files.push($(this)[0].files[i])
}
files.forEach((file,i)=>{
let reader = new FileReader()
reader.onloadend = (e)=>{
imagedata[$(this).attr('id')+(i+1)]={
data:e.target.result.split(',')[1],
name:file.name,
type:file.type
}
}
reader.readAsDataURL(file)
})
})
function submitForm(obj) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
var obj = {}
obj.data1 = $('#data1').val()
obj.data2 = $('#data2').val()
obj.data3 = $('#data3').val()
obj.data4 = $('#data4').val()
obj.data5 = $('#data5').val()
obj.data6 = $('#data6').val()
obj.data7 = $('#data7').val()
obj.data8 = $('#data8').val()
obj.data9 = $('#data9').val()
obj.data10 = $('#data10').val()
obj.data11 = $('#data11').val()
obj.data12 = $('#data12').val()
obj.data13 = $('#data13').val()
obj.data14 = $('#data14').val()
// obj.userEmail = $('#userEmail').val()
obj.imagedata = imagedata
savedata(obj)
}
// เมื่อบันทึกไฟล์สำเร็จ
function savedata(obj){
google.script.run.withSuccessHandler(function (success) {
document.getElementById("myForm").reset()
$('#btn1').show()
$('#btn2').hide()
Swal.fire({
position: 'center',
icon: 'success',
title: 'บันทึกข้อมูลเรียบร้อย',
showConfirmButton: false,
timer: 1500
})
})
.saveData(obj);
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!---form--->
</div>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/JQL.min.js"></script>
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
<link rel="stylesheet" href="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css">
<script type="text/javascript" src="https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
<script>
// $( document ).ready(function() {getData1();});
$( document ).ready(function() {getData3();});
$( document ).ready(function() {getData4();});
$( document ).ready(function() {getData5();});
$( document ).ready(function() {getData6();});
$( document ).ready(function() {getData7();});
$( document ).ready(function() {getData8();});
$( document ).ready(function() {getData9();});
$( document ).ready(function() {getData10();});
$( document ).ready(function() {getData11();});
$( document ).ready(function() {getData12();});
$( document ).ready(function() {getData13();});
$( document ).ready(function() {getData14();});
// function getData1(){
// google.script.run.withSuccessHandler(function(ar){
// detial = [];
// ar.forEach(function(item, index){
// detial.push(item[0]);
// });
// $("#data1").autocomplete({
// source: detial
// });
// }).getData1();
// }
function getData3(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data3").autocomplete({
source: detial
});
}).getData3();
}
function getData4(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data4").autocomplete({
source: detial
});
}).getData4();
}
function getData5(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data5").autocomplete({
source: detial
});
}).getData5();
}
function getData6(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data6").autocomplete({
source: detial
});
}).getData6();
}
function getData7(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data7").autocomplete({
source: detial
});
}).getData7();
}
function getData8(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data8").autocomplete({
source: detial
});
}).getData8();
}
function getData9(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data9").autocomplete({
source: detial
});
}).getData9();
}
function getData10(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data10").autocomplete({
source: detial
});
}).getData10();
}
function getData11(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data11").autocomplete({
source: detial
});
}).getData11();
}
function getData12(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data12").autocomplete({
source: detial
});
}).getData12();
}
function getData13(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data13").autocomplete({
source: detial
});
}).getData13();
}
function getData14(){
google.script.run.withSuccessHandler(function(ar){
detial = [];
ar.forEach(function(item, index){
detial.push(item[0]);
});
$("#data14").autocomplete({
source: detial
});
}).getData14();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js
" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<?!= include('javaScript');?>
<!-- <script>
window.onload = function(){
google.script.run.withSuccessHandler(dropDownList).getData()
}
//ดรอปดาวน์
function dropDownList(data){
var colA = document.getElementById('colA')
var colB = document.getElementById('colB')
var colC = document.getElementById('colC')
for(var x in data){
colA.options[colA.options.length] = new Option(x,x)
}
colA.onchange = function(){
colB.length = 1
colC.length = 1
for(var y in data[this.value]){
colB.options[colB.options.length] = new Option(y,y)
}
}
colB.onchange = function(){
colC.length = 1
var z = data[colA.value][this.value]
for(var i = 0 ; i< z.length; i++){
colC.options[colC.options.length] = new Option(z[i],z[i])
}
}
}
function save(){
var obj={}
obj.colA = document.getElementById('colA').value
obj.colB = document.getElementById('colB').value
obj.colC = document.getElementById('colC').value
google.script.run.saveData(obj)
document.getElementById('colA').value = ""
document.getElementById('colB').value = ""
document.getElementById('colC').value = ""
}
</script> -->
<h5 style="text-align: center;"><b><a href="https://script.google.com/macros/s/AKfycbyIDU-hpGj1bVrPeYQBv_wHJ-no812bQsDUEy55LgkbPKsKiPmPpfsnk6eOfxcqSAmwog/exec" rel="nofollow"> บันทึกข้อมูล ทีมรับใช้ประจำสัปดาห์ ต้องการ Update ข้อมูล ให้เรียบร้อยแล้วครับ</a><br /></b> </h5>
</body>
</html>
-------------------------------------
css.html
****************************
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300&display=swap');
</style>
<style>
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Kanit", sans-serif;
}
.autocomplete {
position: relative;
}
#matchList {
position: absolute;
z-index: 99;
background-color: white;
left: 0;
right: 0;
/* vertical scroll bar */
max-height: 350px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
#matchList:hover {
cursor: pointer;
}
li > span {
pointer-events: none;
}
</style>
*******************************
javaScript.html
-------------------------------------------------------
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js
" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true
} );
} );
</script>
<script>
import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';
let table = new DataTable('#myTable', {
responsive: true
});
</script>
<script>
bower install --save datatables.net
bower install --save datatables.net-dt
</script>
<script>
google.script.run.getSheetData();
</script>
<!--
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"ลำดับ"},
{"title":"ชื่อ-สกุล"},
{"title":"เลขที่สมาชิก"},
{"title":"อายุปัจจุบัน"},
{"title":"อายุ(เป็นสมาชิก)"},
{"title":"โทรศัพท์"},
{"title":"ที่อยู่"},
{"title":"กำหนดเรียกเก็บ"},
{"title":"บำรุงรายปี"},
{"title":"สงเคราะห์ล่วงหน้า"},
{"title":"ทุนการศึกษา"},
{"title":"รวม"},
{"title":"บาทไทย"},
{"title":"เงินคงเหลือ"},
{"title":"ศูนย์ประสานงาน"}
]
});
});
};
</script> -->
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น