彰化一整天的論壇

 找回密碼
 立即註冊
查看: 284|回復: 11

如何設計訂單查詢系統_日期區間顯示加多筆更新狀況

[複製鏈接]
發表於 2021-1-23 15:07:08 | 顯示全部樓層 |閱讀模式
本帖最後由 imingho 於 2021-1-28 19:31 編輯

有網友提到是否可以用核取方塊做多個選項更新,所以就做了這支查詢及更新的功能,功能大概說明一下,就是輸入日期區間會查出訂單,勾選想要更新的訂單輸入【訂單狀態】,再按一次就會更新。
測試查詢程式:http://bestdaylong.com/html/OrderInq.htm
試算表網址: https://docs.google.com/spreadsh ... 2w/edit?usp=sharing

網頁程式碼:
  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 inq()
  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.                                                                 if(i==0)
  57.                                                                   html+="<td>編號</td>";
  58.                                                                 else
  59.                                                                   html+="<td>"+'<input type=checkbox id="OrderID" value="'+obj[i].data[0]+'">'+i+"</td>";
  60.                                 for(j=0;j<obj[i].data.length;j++)
  61.                                 {
  62.                                   html+= '<td>'+obj[i].data[j]+'</td>';
  63.                                 }
  64.                                 html  += '</tr>';            
  65.                         }
  66.                         html+="</table>";
  67.                         
  68.                         document.getElementById("order_status").innerHTML=html;
  69.                         if(obj.length==1) //只有一筆代表查不到資料
  70.                                 alert('查無資料');
  71.                   }

  72.           }
  73.     var url="https://script.google.com/macros/s/AKfycbz-7Djl13Djepmx3KPdpGqbQDSlyzdSQaAexqPWoc9hPAEtBEik8TCAHg/exec";
  74.         
  75.         var OrderID_list="";
  76.                 if (typeof(OrderID) !== 'undefined')
  77.                 {
  78.                         for (var i = 0; i < OrderID.length; i++) {
  79.                           if (OrderID[i].checked) {
  80.                                         OrderID_list += OrderID[i].value + ",";
  81.                           }
  82.                         }
  83.                         if(OrderID_list.length>0)
  84.                            OrderID_list=OrderID_list.substr(0,OrderID_list.length-1);
  85.                 }
  86.                
  87.                 url+="?BeginDate="+BeginDate.value+"&EndDate="+EndDate.value+"&OrderID="+OrderID_list+"&OrderStatus="+OrderStatus.value;
  88.                 console.log(url);
  89.         xmlhttp.open("get",url,true);
  90.         xmlhttp.send();
  91. }

  92. </script>
  93. </head>
  94. <body>
  95. 輸入開始訂購日期:<input type="text" id="BeginDate" value="2020/02/01" /><br/>
  96. 輸入結束訂購日期:<input type="text" id="EndDate" value="2020/02/10" /><br/>

  97. 訂單狀況:<input type="text" id="OrderStatus" value="" /><br/>
  98. <input type="button" name="inq" value="查詢/更新" onclick="inq();"></br>
  99. <span id="order_status"></span>
  100. </body>
  101. </html>
複製代碼
試算表程式:
  1. function doGet(e) {
  2.   //https://youtu.be/MQV3AlAOtCU 影音說明
  3.   var params = e.parameter;
  4.   var BeginDate = Date.parse(params.BeginDate);
  5.   var EndDate=Date.parse(params.EndDate);
  6.   var OrderID=params.OrderID;
  7.   //var OrderName=params.OrderName;
  8.   var OrderStatus=params.OrderStatus;//匯款後3碼

  9.   var OrderList=OrderID.split(",");


  10.   var Sheet = SpreadsheetApp.getActiveSheet();

  11.   var LastRow = Sheet.getLastRow();
  12.   var LastColumn = Sheet.getLastColumn();
  13.   var data = [];

  14.   // 取得全部資料
  15.   var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
  16.   
  17.   //存標題
  18.   data.push({data: listAll[0]})

  19.   var ListDate;//儲存日期格式
  20.   var ListOrderID;
  21.   // 找尋資料是否有存在
  22.   for(var i = 1;i < listAll.length; i++){
  23.     ListDate=listAll[i][1];
  24.     ListDate=Date.parse(ListDate);
  25.     ListOrderID=listAll[i][0];
  26.     if(ListDate>=BeginDate && ListDate<=EndDate){
  27.       if(OrderStatus!="" && OrderList.indexOf(ListOrderID)!=-1)
  28.       {
  29.         Sheet.getRange("D"+(i+1)).setValue(OrderStatus);//寫回狀態   
  30.         Sheet.getRange("G"+(i+1)).setValue(new Date());//寫回狀態
  31.         listAll[i]=Sheet.getSheetValues(i+1,1,1,LastColumn)[0];//重新讀取
  32.       }
  33.       data.push({data: listAll[i]})
  34.     }
  35.   }
  36.   
  37.   //顯示資料
  38.   Logger.log(data);
  39.   
  40.   // 回傳json資料
  41.   return ContentService.createTextOutput(JSON.stringify(data))
  42.     .setMimeType(ContentService.MimeType.JSON);
  43. }
複製代碼



回復

使用道具 舉報

發表於 2021-1-24 09:46:27 | 顯示全部樓層
板主您好,請問一下,您這個寫法,為何訂單編號要放在第一欄[0],而不是在第二欄[1]
這個寫法要注意什麼呢??
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-1-24 09:52:07 | 顯示全部樓層
Francis 發表於 2021-1-24 09:46
板主您好,請問一下,您這個寫法,為何訂單編號要放在第一欄[0],而不是在第二欄[1]
這個寫法要注意什麼呢? ...

這個版本下禮拜四會錄解說版,放那一個欄位都可以,只是想說把它放在第1欄,網友就可以直接套用程式,或是其它欄位只要修改前端的。
  1. html+="<td>"+'<input type=checkbox id="OrderID" value="'+obj[i].data[0]+'">'+i+"</td>";
複製代碼
這裡的0改就可以
回復 支持 反對

使用道具 舉報

發表於 2021-1-24 18:47:05 | 顯示全部樓層
謝謝板主,很期待您的影片,剛剛也參考您的內容,學習了不少知識。
回復 支持 反對

使用道具 舉報

發表於 2021-2-4 11:15:46 | 顯示全部樓層
板主您好,
昨日看完您分享的影片後,
我研究一下內容做了一個小修正,新增套入一個模糊搜尋的功能,但會出現查無資料,寫法如下,需要在跟您請益精進學習一下,想瞭解是什麼原因造成無法完成模糊搜尋這個問題。

資料庫連結:https://docs.google.com/spreadsheets/d/1hJkcK6TfR49QnqWm0aRpeRzGNyE3puaFFj9YZfhZB94/edit?usp=sharing
HTML前端代碼:
  1. <html>

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

  22.         var dateReviver = function(key, value) {
  23.             var a;
  24.             if (typeof value === 'string') {
  25.                 a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  26.                 if (a) {
  27.                     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");
  28.                 }
  29.             }
  30.             return value;
  31.         };

  32.         function inq() {
  33.             var xmlhttp;

  34.             if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  35.                 xmlhttp = new XMLHttpRequest();
  36.             } else { // code for IE6, IE5
  37.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  38.             }
  39.             xmlhttp.onreadystatechange = function() {
  40.                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  41.                     var result = xmlhttp.responseText;
  42.                     var obj = JSON.parse(result, dateReviver); //解析json字串為json物件形式

  43.                     var html = '<table border=1 width=100%>'; //

  44.                     for (var i = 0; i < obj.length; i++) { //
  45.                         html += '<tr>'; //
  46.                         if (i == 0)
  47.                             html += "<td>編號</td>";
  48.                         else
  49.                             html += "<td>" + '<input type=checkbox id="OrderID" value="' + obj[i].data[0] + '">' + i + "</td>";
  50.                         for (j = 0; j < obj[i].data.length; j++) {
  51.                             html += '<td>' + obj[i].data[j] + '</td>';
  52.                         }
  53.                         html += '</tr>';
  54.                     }
  55.                     html += "</table>";

  56.                     document.getElementById("order_status").innerHTML = html;
  57.                     if (obj.length == 1) //只有一筆代表查不到資料
  58.                         alert('查無資料');
  59.                 }

  60.             }
  61.             var url = "https://script.google.com/macros/s/AKfycby6DNN-JoY1VY-2xcOucvbyTfBAE771bWyn3Ckwy8r3T8Uo1JiENVuxcg/exec";

  62.             var OrderID_list = "";
  63.             if (typeof(OrderID) !== 'undefined') {
  64.                 for (var i = 0; i < OrderID.length; i++) {
  65.                     if (OrderID[i].checked) {
  66.                         OrderID_list += OrderID[i].value + ",";
  67.                     }
  68.                 }
  69.                 if (OrderID_list.length > 0)
  70.                     OrderID_list = OrderID_list.substr(0, OrderID_list.length - 1);
  71.             }

  72.             url += "?BeginDate=" + BeginDate.value + "&EndDate=" + EndDate.value + "&OrderID=" + OrderID_list + "&CName=" + CName.value + "&OrderStatus=" + OrderStatus.value;
  73.             console.log(url);
  74.             xmlhttp.open("get", url, true);
  75.             xmlhttp.send();
  76.         }
  77.     </script>
  78. </head>

  79. <body>
  80.     輸入開始訂購日期:<input type="text" id="BeginDate" value="2020/02/01" /><br/> 輸入結束訂購日期:
  81.     <input type="text" id="EndDate" value="2020/02/10" /><br/> 姓名:
  82.     <input type="text" id="CName" value="" /><br/> 訂單狀況:
  83.     <input type="text" id="OrderStatus" value="" /><br/>
  84.     <input type="button" name="inq" value="查詢/更新" onclick="inq();"></br>
  85.     <span id="order_status"></span>
  86. </body>

  87. </html>
複製代碼


Google script後端代碼:
  1. function doGet(e) {
  2.     //https://youtu.be/MQV3AlAOtCU 影音說明
  3.     var params = e.parameter;
  4.     var BeginDate = Date.parse(params.BeginDate);
  5.     var EndDate = Date.parse(params.EndDate);
  6.     var OrderID = params.OrderID;
  7.     var CName = params.CName;//姓名
  8.     //var OrderName=params.OrderName;
  9.     var OrderStatus = params.OrderStatus; //匯款後3碼

  10.     var OrderList = OrderID.split(",");


  11.     var Sheet = SpreadsheetApp.getActiveSheet();

  12.     var LastRow = Sheet.getLastRow();
  13.     var LastColumn = Sheet.getLastColumn();
  14.     var data = [];

  15.     // 取得全部資料
  16.     var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);

  17.     //存標題
  18.     data.push({ data: listAll[0] })

  19.     var ListDate; //儲存日期格式
  20.     var ListOrderID;
  21.     // 找尋資料是否有存在
  22.     for (var i = 1; i < listAll.length; i++) {
  23.         ListDate = listAll[i][1];
  24.         ListDate = Date.parse(ListDate);
  25.         ListOrderID = listAll[i][0];
  26.         //用訂單狀態做判斷,然後用switch
  27.         switch(OrderStatus=="")
  28.         {
  29.           case(OrderStatus==""):
  30.         if (ListDate >= BeginDate && ListDate <= EndDate) {
  31.             if (OrderStatus != "" && OrderList.indexOf(ListOrderID) != -1) {
  32.                 Sheet.getRange("D" + (i + 1)).setValue(OrderStatus); //寫回狀態   
  33.                 Sheet.getRange("G" + (i + 1)).setValue(new Date()); //寫回狀態
  34.                 listAll[i] = Sheet.getSheetValues(i + 1, 1, 1, LastColumn)[0]; //重新讀取
  35.             }
  36.             data.push({ data: listAll[i] })
  37.         }
  38.         break;
  39.         case(OrderStatus!=""&& listAll[i][2].indexOf(CName)!=-1):
  40.         if (BeginDate =='' && EndDate=='' && listAll[i][2].indexOf(CName)!=-1) {
  41.             if (OrderStatus != "" && OrderList.indexOf(ListOrderID) != -1) {
  42.                 Sheet.getRange("D" + (i + 1)).setValue(OrderStatus); //寫回狀態   
  43.                 Sheet.getRange("G" + (i + 1)).setValue(new Date()); //寫回狀態
  44.                 listAll[i] = Sheet.getSheetValues(i + 1, 1, 1, LastColumn)[0]; //重新讀取
  45.             }
  46.             data.push({ data: listAll[i] })
  47.         }
  48.         break;
  49.     }
  50.     }

  51.     //顯示資料
  52.     Logger.log(data);

  53.     // 回傳json資料
  54.     return ContentService.createTextOutput(JSON.stringify(data))
  55.         .setMimeType(ContentService.MimeType.JSON);
  56. }
複製代碼
圖片 2.png
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-2-4 14:06:39 | 顯示全部樓層
Francis 發表於 2021-2-4 11:15
板主您好,
昨日看完您分享的影片後,
我研究一下內容做了一個小修正,新增套入一個模糊搜尋的功能,但會出 ...

請參考底下影片自行偵錯,看出現什麼錯誤訊息。

回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-2-6 09:37:05 | 顯示全部樓層
本帖最後由 imingho 於 2021-2-7 11:47 編輯
Francis 發表於 2021-2-4 11:15
板主您好,
昨日看完您分享的影片後,
我研究一下內容做了一個小修正,新增套入一個模糊搜尋的功能,但會出 ...

您switch的語法是參考那個網站語法寫出來的。您的這種用法我沒看過。

請參考底下網友的用法。
https://pclevinblog.pixnet.net/blog/post/314562085
[JavaScript-基本類]流程控制-使用switch-case
回復 支持 反對

使用道具 舉報

發表於 2021-2-18 05:28:38 | 顯示全部樓層
imingho 發表於 2021-2-6 09:37
您switch的語法是參考那個網站語法寫出來的。您的這種用法我沒看過。

請參考底下網友的用法。

板主您好,謝謝您的分享,
這個寫法,是我意想天開嘗試寫的。
寫完後,僅有前面兩項是OK,第三項就判斷不出來了。
參考板主所提供的內容,思考了一下寫法有以下的疑問:
1.是不是要另外做一個 function去做判斷??
2.function()內的就是 switch()要判斷的??
3.為何不直接用var message=""這個套入到switch()這裡呢??
4.另外(number)中的number,這個是不是還要另外寫if+else if +else if去判斷1,2,3呢??

  1. <script type="text/javascript">
  2.   function chooseFun(number){
  3.    var message="";
  4.    switch (number) {
  5.    case "1" :
  6.      message ="你選擇的是1:汽車";
  7.      break;
  8.    case "2" :
  9.      message ="你選擇的是2:房子";
  10.      break;
  11.    case "3" :
  12.      message ="你選擇的是3:電腦";
  13.      break;
  14.    case "4" :
  15.      message ="你選擇的是4:電視";
  16.      break;
  17.    default:
  18.      message ="你選擇"+number+"的不在選項內";
  19.      break;
  20.    }
  21.    return message;
  22.   }
  23.   
  24.   document.write(chooseFun("1") + "<br>");
  25.   document.write(chooseFun("2") + "<br>");
  26.   document.write(chooseFun("5") + "<br>");
  27. </script>
複製代碼
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-2-18 13:55:37 | 顯示全部樓層
Francis 發表於 2021-2-18 05:28
板主您好,謝謝您的分享,
這個寫法,是我意想天開嘗試寫的。
寫完後,僅有前面兩項是OK,第三項就判斷不 ...

switch只能用一個變數去判斷,後面的case就是那個變數等於的值。
if就比較彈性,可用一個變數或多個不同變數判斷,中間可以加上and(&&)或是or(||),但是switch不行就樣用。
回復 支持 反對

使用道具 舉報

 樓主| 發表於 7 天前 | 顯示全部樓層
Francis 發表於 2021-2-18 05:28
板主您好,謝謝您的分享,
這個寫法,是我意想天開嘗試寫的。
寫完後,僅有前面兩項是OK,第三項就判斷不 ...

幫您錄了一個解說版本,請參考.
【Google表單教學】if跟switch的差異
http://discuz.bestdaylong.com/thread-39197-1-1.html
(出處: 彰化一整天的論壇)
回復 支持 反對

使用道具 舉報

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

本版積分規則

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

GMT+8, 2021-2-26 14:38 , Processed in 0.125694 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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