彰化一整天的論壇

 找回密碼
 立即註冊
查看: 3796|回復: 20

【Google表單教學】如何設計訂單查詢系統

[複製鏈接]
發表於 2020-8-6 19:06:50 | 顯示全部樓層 |閱讀模式
本帖最後由 imingho 於 2020-11-5 11:00 編輯

因為很多人問到要如何查詢google表單,例如輸入身分證查詢報名資料,或是輸入訂單查訂貨情況,今天就教大家如何複製程式碼及怎麼修改成符合自己的需求。

Google APP Script

  1. function doGet(e) {
  2.   //https://youtu.be/MQV3AlAOtCU 影音說明
  3.   var params = e.parameter;
  4.   var uid = params.uid;


  5.   var Sheet = SpreadsheetApp.getActiveSheet();

  6.   var LastRow = Sheet.getLastRow();
  7.   var LastColumn = Sheet.getLastColumn();
  8.   var data = [];

  9.   // 取得全部資料
  10.   var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
  11.   
  12.   //存標題
  13.   data.push({data: listAll[0]})

  14.   
  15.   // 找尋資料是否有存在
  16.   for(var i = 1;i < listAll.length; i++){
  17.     if(listAll[i][1]==uid){
  18.       data.push({data: listAll[i]})
  19.     }
  20.   }
  21.   
  22.   //顯示資料
  23.   Logger.log(data);
  24.   
  25.   // 回傳json資料
  26.   return ContentService.createTextOutput(JSON.stringify(data))
  27.     .setMimeType(ContentService.MimeType.JSON);
  28. }
複製代碼


HTML網頁程式碼
  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <script type="text/javascript">
  5. function showHint(str)
  6. {
  7. var xmlhttp;

  8.         if (window.XMLHttpRequest)
  9.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  10.           xmlhttp=new XMLHttpRequest();
  11.           }
  12.         else
  13.           {// code for IE6, IE5
  14.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.           }
  16.         xmlhttp.onreadystatechange=function()
  17.           {
  18.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  19.                   {
  20.                         var result=xmlhttp.responseText;
  21.                         var obj = JSON.parse(result);//解析json字串為json物件形式
  22.                                                 
  23.                         var html = '<table border=1 width=100%>';//
  24.                         
  25.                         for (var i = 0; i < obj.length; i ++ ) {//
  26.                                 html  += '<tr>';//
  27.                                 for(j=0;j<obj[i].data.length;j++)
  28.                                 {
  29.                                   html+= '<td>'+obj[i].data[j]+'</td>';
  30.                                 }
  31.                                 html  += '</tr>';            
  32.                         }
  33.                         html+="</table>";
  34.                         
  35.                         document.getElementById("order_status").innerHTML=html;
  36.                         if(obj.length==1) //只有一筆代表查不到資料
  37.                                 alert('查無資料');
  38.                   }

  39.           }
  40.     var url="https://script.google.com/macros/s/AKfycbwJOajAYKRM77CELpG5bf5koUbY-TdN24apUJfo22FLsYft9rTP/exec";
  41.         xmlhttp.open("get",url+"?uid="+encodeURIComponent(str),true);
  42.         xmlhttp.send();
  43. }
  44. </script>
  45. </head>
  46. <body>

  47. 輸入購買者身分證號:<input type="text" id="uid" />
  48. <input type="button" name="inq" value="查詢" onclick="showHint(uid.value);"></br>

  49. <span id="order_status"></span>
  50. </body>
  51. </html>
複製代碼
測試頁面:
https://bestdaylong.blogspot.com/2020/08/google.html




回復

使用道具 舉報

 樓主| 發表於 2021-1-4 21:31:16 | 顯示全部樓層
imingho 發表於 2021-1-4 16:16
查詢表格轉置的寫法。
範例網址:
https://sites.google.com/view/inputatm20201010/%E8%A8%82%E5%96%AE%E6 ...

修正日期顯示方式.測試網址: http://bestdaylong.com/html/inq03.htm
google_inq_date.jpg


  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <script type="text/javascript">
  5. Date.prototype.format = function(fmt)
  6. {
  7.   var o = {
  8.     "M+" : this.getMonth()+1, //月份
  9.     "d+" : this.getDate(), //日
  10.     "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時
  11.     "H+" : this.getHours(), //小時
  12.     "m+" : this.getMinutes(), //分
  13.     "s+" : this.getSeconds(), //秒
  14.     "q+" : Math.floor((this.getMonth()+3)/3), //季度
  15.     "S" : this.getMilliseconds() //毫秒
  16.   };
  17.   if(/(y+)/.test(fmt))
  18.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  19.   for(var k in o)
  20.     if(new RegExp("("+ k +")").test(fmt))
  21.   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  22.   return fmt;
  23. }

  24. var dateReviver = function (key, value) {
  25.     var a;
  26.     if (typeof value === 'string') {
  27.         a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  28.         if (a) {
  29.             return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])).format("yyyy-MM-dd HH:mm:ss");
  30.         }
  31.     }
  32.     return value;
  33. };
  34. function showHint(str)
  35. {
  36. var xmlhttp;

  37.         if (window.XMLHttpRequest)
  38.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  39.           xmlhttp=new XMLHttpRequest();
  40.           }
  41.         else
  42.           {// code for IE6, IE5
  43.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  44.           }
  45.         xmlhttp.onreadystatechange=function()
  46.           {
  47.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  48.                   {
  49.                         var result=xmlhttp.responseText;
  50.                         var obj = JSON.parse(result,dateReviver);//解析json字串為json物件形式
  51.                                                 
  52.                         var html = '<table border=1 width=100%>';//
  53.                         
  54.                         for (var i = 0; i < obj.length; i ++ ) {//
  55.                                 html  += '<tr>';//
  56.                                 for(j=0;j<obj[i].data.length;j++)
  57.                                 {
  58.                                   html+= '<td>'+obj[i].data[j]+'</td>';
  59.                                 }
  60.                                 html  += '</tr>';            
  61.                         }
  62.                         html+="</table>";
  63.                         
  64.                         document.getElementById("order_status").innerHTML=html;
  65.                         if(obj.length==1) //只有一筆代表查不到資料
  66.                                 alert('查無資料');
  67.                   }

  68.           }
  69.     var url="https://script.google.com/macros/s/AKfycbwJOajAYKRM77CELpG5bf5koUbY-TdN24apUJfo22FLsYft9rTP/exec";
  70.         xmlhttp.open("get",url+"?uid="+encodeURIComponent(str),true);
  71.         xmlhttp.send();
  72. }
  73. </script>
  74. </head>
  75. <body>
  76. 請輸入A01或A02做測試<br/>
  77. 輸入購買者身分證號:<input type="text" id="uid" />
  78. <input type="button" name="inq" value="查詢" onclick="showHint(uid.value);"></br>

  79. <span id="order_status"></span>
  80. </body>
  81. </html>
複製代碼


回復 支持 1 反對 0

使用道具 舉報

發表於 2020-9-21 23:15:23 | 顯示全部樓層
首先給謝您的影片教學,非常的清楚且實用。
現在有一個問題請教,
目前程式設計在搜尋中,必須要精確符合才行,
如果要改成模糊搜尋(就是部分字元相同),
方便教導一下嗎?
謝謝~
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2020-9-22 08:48:57 | 顯示全部樓層
mengche 發表於 2020-9-21 23:15
首先給謝您的影片教學,非常的清楚且實用。
現在有一個問題請教,
目前程式設計在搜尋中,必須要精確符合才 ...

部分尋找程式碼如下.
  1. function doGet(e) {
  2.   //https://youtu.be/MQV3AlAOtCU 影音說明
  3.   var params = e.parameter;
  4.   var uid = params.uid;


  5.   var Sheet = SpreadsheetApp.getActiveSheet();

  6.   var LastRow = Sheet.getLastRow();
  7.   var LastColumn = Sheet.getLastColumn();
  8.   var data = [];

  9.   // 取得全部資料
  10.   var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
  11.   
  12.   //存標題
  13.   data.push({data: listAll[0]})

  14.   
  15.   // 找尋資料是否有存在
  16.   for(var i = 1;i < listAll.length; i++){
  17.     if(listAll[i][0].indexOf(uid) != -1){
  18.       data.push({data: listAll[i]})
  19.     }
  20.   }
  21.   
  22.   //顯示資料
  23.   Logger.log(data);
  24.   
  25.   // 回傳json資料
  26.   return ContentService.createTextOutput(JSON.stringify(data))
  27.     .setMimeType(ContentService.MimeType.JSON);
  28. }
複製代碼


回復 支持 反對

使用道具 舉報

發表於 2020-9-28 22:04:52 | 顯示全部樓層
非常感謝版主的分享,已成功建立查詢網頁。

1.想請問有沒有辦法可再查詢uid時,同時於試算表內寫入該uid的查詢時間,寫到該欄位最後一格,
或者寫入該uid及Date()到另一個試算表,
以方便記錄"查詢"的時間及次數。

因我想透過查詢網頁,建立一個防疫門禁紀錄,
使用者透過輸入身分證字號後,
顯示個人資訊、現在時間(查詢時間=進入時間)等,方便做實名驗證。

目前卡在搜尋後寫入時間的部分不知道要放在哪個地方,
嘗試過很多方法、或在HTML部分放第2個var url(寫入uid跟Date()到另一個試算表)都不行,好像同時只能執行一個程式碼而已。


2.另外有無方法查詢後跳出的資訊可否隱藏部分欄位,如身分證(在儲存格B2),想從儲存格第3格(B3)開始往後撈到底,但我看語法好像都是全部撈出。

再懇請版主指導,謝謝!
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2020-9-29 10:31:06 | 顯示全部樓層
本帖最後由 imingho 於 2020-9-29 13:22 編輯
namcp 發表於 2020-9-28 22:04
非常感謝版主的分享,已成功建立查詢網頁。

1.想請問有沒有辦法可再查詢uid時,同時於試算表內寫入該uid的 ...

您好,
請參考【Google 教學】如何透過app script 讀取寫入試算表
http://discuz.bestdaylong.com/fo ... 38930&fromuid=2


有問題再上傳程式碼及畫面

http://discuz.bestdaylong.com/thread-30239-1-1.html
如何在discuz張貼程式碼跟
discuz如何在回文時上傳圖片
http://discuz.bestdaylong.com/fo ... &tid=1920&fromuid=2



上傳您修改過的程式碼.

回復 支持 反對

使用道具 舉報

發表於 2020-9-29 17:16:36 | 顯示全部樓層
namcp 發表於 2020-9-28 22:04
非常感謝版主的分享,已成功建立查詢網頁。

1.想請問有沒有辦法可再查詢uid時,同時於試算表內寫入該uid的 ...

非常感謝版主,透過參閱各種方法後已解決,
執行查詢後,可寫入uid跟時間到另一個試算表,程式碼如下
修改部分為 //查詢寫入到另一個試算表


  1. function doGet(e) {
  2.   var params = e.parameter;
  3.   var uid = params.uid;

  4. //讀取用
  5.   var Sheet = SpreadsheetApp.openByUrl("試算表1網址");//試算表主分頁
  6.   var LastRow = Sheet.getLastRow();
  7.   var LastColumn = Sheet.getLastColumn();
  8.   var data = [];
  9.   
  10.   // 取得全部資料
  11.   var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
  12.   
  13.   
  14.   
  15.   //存標題
  16.   data.push({data: listAll[0]})

  17.     //查詢寫入到另一個試算表
  18.   var Sheet2 = SpreadsheetApp.openByUrl("試算表2網址");//試算表第二分頁
  19.   var SheetTag = Sheet2.getSheetByName("in");//試算表2名稱
  20.   var LastRow2 = SheetTag.getLastRow();
  21.     SheetTag.getRange(LastRow2+1,1).setValue(uid); //寫入ID到sheet1
  22.   SheetTag.getRange(LastRow2+1,2).setValue(new Date()); //寫入日期到sheet2
  23.   
  24.   // 找尋資料是否有存在
  25.   for(var i = 1;i < listAll.length; i++){
  26.     if(listAll[i].indexOf(uid) === 1){
  27.       data.push({data: listAll[i]})
  28.     }
  29.   }
  30.   
  31.   //顯示資料
  32.   Logger.log(data);
  33.   
  34.   // 回傳json資料
  35.   return ContentService.createTextOutput(JSON.stringify(data))
  36.     .setMimeType(ContentService.MimeType.JSON);
  37. }
複製代碼
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2020-9-30 09:05:03 | 顯示全部樓層
namcp 發表於 2020-9-28 22:04
非常感謝版主的分享,已成功建立查詢網頁。

1.想請問有沒有辦法可再查詢uid時,同時於試算表內寫入該uid的 ...

隱藏部分欄位
請參考
http://discuz.bestdaylong.com/thread-39034-1-1.html
如何設計訂單查詢系統_部分顯示【Google表單教學】
回復 支持 反對

使用道具 舉報

發表於 2020-10-21 14:46:12 | 顯示全部樓層
您好,真的很感謝您提供這個教學!!!讓我這個完全不懂得人都能成功做出,真的超棒的~~感動!

但是有一個問題想問~~  關於在HTML網頁程式碼內,
if(obj.length==1) //只有一筆代表查不到資料
alert('查無資料');

上面這一段,查不到訂單的回饋【查無資料】,因為我想更改備註多一點,告知查詢的人查詢不到訂單是什麼問題....但我沒辦法讓字段換行,請問是有辦法能讓字段呈現成:

貼心提醒 -若是查不到訂單有以下幾種狀況~
一.查詢取件者姓名輸入錯誤                    
二.訂單預購中尚未發貨                           
三.下單並未成功
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2020-10-21 16:03:56 | 顯示全部樓層
qwe1395 發表於 2020-10-21 14:46
您好,真的很感謝您提供這個教學!!!讓我這個完全不懂得人都能成功做出,真的超棒的~~感動!

但是有一個 ...

您好,在字串中加入\n代表javascript的換行.
javascript_enter.jpg

  1. alert('查無資料\n請確認資料是否輸入錯誤');
複製代碼
回復 支持 反對

使用道具 舉報

發表於 2020-11-3 08:40:08 | 顯示全部樓層
Dear 老師:

謝謝你提供google資料庫查詢設計教學
目前使用都很順利,但今天遇到了一個問題就是我表格新增資料超過300後就收尋不到300以後的欄位了,但我記得程式碼是用
var LastRow = Sheet.getLastRow();
var LastColumn = Sheet.getLastColumn();

應該是要可以查到活頁簿最後一欄位,怎麼會這樣,想尋問您有辦法幫助我嗎?
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)

GMT+8, 2021-2-25 03:54 , Processed in 0.120300 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表