Web Apps ระบบค้นหาข้อมูลใน google sheets

bysemicon -
0







  

code.gs

/** Credit: https://github.com/codingmarket07 */
/** Code:  https://guruchian.blogspot.com/ */

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

/** @Include Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

function searchForm(record){
  const ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  let data = ss.getDataRange().getValues()
  const id = data.map(r => r[0])
  const index = id.indexOf(record) 
  const output = {}
  if(index > -1){
    data = ss.getRange(index+1,1,1,ss.getLastColumn()).getValues()[0]
    output.result = true
    output.data = data
    //Logger.log(index)
    
  }else{
    
    output.result = false
  }
  //Logger.log(output)
  return output

}


index_css.html

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	list-style: none;
	font-family: 'Open Sans', sans-serif;
}

html {
	height: 100%;
	background:
	  linear-gradient(
		limegreen,
		transparent
	  ),
	  linear-gradient(
		90deg,
		skyblue,
		transparent
	  ),
	  linear-gradient(
		-90deg,
		coral,
		transparent
	  );
	  
	background-blend-mode: screen;
	}

  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .search-box {
    width: 350px;
    height: 90px;
    position: relative;
  }

  .input {
    position: absolute;
    top: 20px;
    right: 50px;
    box-sizing: border-box;
    width: 0px;
    height: 63px;
    padding: 0 20px;
    outline: none;
    font-size: 16px;
    border-radius: 50px;
    color: #444;
    border: 3px solid #000;
    transition: all 0.8s ease;
  }

  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #999;
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #999;
  }

  :-ms-input-placeholder {
    /* IE 10+ */
    color: #999;
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: #999;
  }

  .btn {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #000;
    border-radius: 50%;
    right: 45px;
    top: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 80px;
    font-size: 16px;
    color: #fff;
    transition: all 0.8s ease;
  }

  .input.active {
    width: 350px;
    right: 5px;
  }

  .btn.animate {
    transform: rotate(-360deg);
    right: 5px;
  }


  table {
    border-collapse: collapse;
    width: 100%;
    margin-top:15px;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    color:#000;
  }
  tr{
    background-color: #ffffff;
  }
  tr:nth-child(even) {
    background-color: #e5e5e5;
  }

  .detail{
    text-align:center; 
    background-color:#000;
    color:#fff;
  }

  .message{
    text-align:center; 
    color:#f00;
    font-size: 16px;
  }


index.html

<html>
<head>
  <title>Expanding Search Box</title>
  <?!=include('index_css.html')?>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
  <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" type="module"></script>
</head>
<body>

<div class="wrapper">
  <div class="search-box">
     <input type="text" placeholder="Enter your ID" id="id" minlength="4" maxlength="4" class="input">
     <div class="btn">
       <i class="fa fa-search" aria-hidden="true"></i>
     </div>
   </div>
   <div class="message">
    <b  id="message"></b>
   <table class="table" id="tb" style="width:100%"></table>
</div>
</div>

<?!=include('index_js.html')?>

</body>
</html>


index_js.html

  
  $(".btn").click(function(){
        event.preventDefault()
        let record = $(".input").val();
        if(document.getElementById('id').value == "" ){
            $(".input").toggleClass("active").focus;
            $(this).toggleClass("animate");
            $(".input").val("");
            $("#tb").html('');
            
          }else{
          
                google.script.run.withSuccessHandler(success).searchForm(record);
                $("#message").html('Loading...'); 
                $("#message").html(''); 
                $("#tb").html(''); 

            }
  });

  function success(output){

      if(output.result == true){

        $("#id").val("");
        $("#message").html('');
        const div =  document.createElement('div')
            div.setAttribute('id','tb')
            document.body.appendChild(div)
            document.getElementById('tb').innerHTML = 
          `<table>
            <tr>
            <th colspan="2" class="detail">Data</th>
            </tr>
            <tr>
            <th scope='col'>ID</th>
            <td scope='col'>${output.data[0]}</td>
            </tr>
            <tr>
            <th scope='col'>Fullname</th> 
            <td scope='col'>${output.data[1]}</td>
            </tr> 
            <tr>
            <th scope='col'>grade</th>
            <td scope='col'>${output.data[2]}</td>
            </tr>
            <tr>
            <th scope='col'>class</th>
            <td scope='col'>${output.data[3]}</td>
            </tr>
          </table>` 
       }else{
          $("#message").html('Find not found !');
          setTimeout(function(){
            $("#message").html('');
            $(".input").val("");
          }, 1500); 
            $("#tb").html(''); 
         }
       }
Credit: https://codepen.io/RajRajeshDn/pen/gXEmra
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า