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

imingho · 發表於 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

網頁程式碼:

<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
Date.prototype.format = function(fmt)
{
　　var o = {
　　　　"M+" : this.getMonth()+1, //月份
　　　　"d+" : this.getDate(), //日
　　　　"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時
　　　　"H+" : this.getHours(), //小時
　　　　"m+" : this.getMinutes(), //分
　　　　"s+" : this.getSeconds(), //秒
　　　　"q+" : Math.floor((this.getMonth()+3)/3), //季度
　　　　"S" : this.getMilliseconds() //毫秒
　　};
　　if(/(y+)/.test(fmt))
　　　　fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
　　for(var k in o)
　　　　if(new RegExp("("+ k +")").test(fmt))
　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
　　return fmt;
}
var dateReviver = function (key, value) {
var a;
if (typeof value === 'string') {
a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
if (a) {
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");
}
}
return value;
};
function inq()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var result=xmlhttp.responseText;
var obj = JSON.parse(result,dateReviver);//解析json字串為json物件形式
var html = '<table border=1 width=100%>';//
for (var i = 0; i < obj.length; i ++ ) {//
html += '<tr>';//
if(i==0)
html+="<td>編號</td>";
else
html+="<td>"+'<input type=checkbox id="OrderID" value="'+obj[i].data[0]+'">'+i+"</td>";
for(j=0;j<obj[i].data.length;j++)
{
html+= '<td>'+obj[i].data[j]+'</td>';
}
html += '</tr>';
}
html+="</table>";
document.getElementById("order_status").innerHTML=html;
if(obj.length==1) //只有一筆代表查不到資料
alert('查無資料');
}
}
var url="https://script.google.com/macros/s/AKfycbz-7Djl13Djepmx3KPdpGqbQDSlyzdSQaAexqPWoc9hPAEtBEik8TCAHg/exec";
var OrderID_list="";
if (typeof(OrderID) !== 'undefined')
{
for (var i = 0; i < OrderID.length; i++) {
if (OrderID[i].checked) {
OrderID_list += OrderID[i].value + ",";
}
}
if(OrderID_list.length>0)
OrderID_list=OrderID_list.substr(0,OrderID_list.length-1);
}
url+="?BeginDate="+BeginDate.value+"&EndDate="+EndDate.value+"&OrderID="+OrderID_list+"&OrderStatus="+OrderStatus.value;
console.log(url);
xmlhttp.open("get",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
輸入開始訂購日期：<input type="text" id="BeginDate" value="2020/02/01" /><br/>
輸入結束訂購日期：<input type="text" id="EndDate" value="2020/02/10" /><br/>
訂單狀況：<input type="text" id="OrderStatus" value="" /><br/>
<input type="button" name="inq" value="查詢/更新" onclick="inq();"></br>
<span id="order_status"></span>
</body>
</html>

複製代碼

試算表程式:

function doGet(e) {
//https://youtu.be/MQV3AlAOtCU 影音說明
var params = e.parameter;
var BeginDate = Date.parse(params.BeginDate);
var EndDate=Date.parse(params.EndDate);
var OrderID=params.OrderID;
//var OrderName=params.OrderName;
var OrderStatus=params.OrderStatus;//匯款後3碼
var OrderList=OrderID.split(",");
var Sheet = SpreadsheetApp.getActiveSheet();
var LastRow = Sheet.getLastRow();
var LastColumn = Sheet.getLastColumn();
var data = [];
// 取得全部資料
var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
//存標題
data.push({data: listAll[0]})
var ListDate;//儲存日期格式
var ListOrderID;
// 找尋資料是否有存在
for(var i = 1;i < listAll.length; i++){
ListDate=listAll[i][1];
ListDate=Date.parse(ListDate);
ListOrderID=listAll[i][0];
if(ListDate>=BeginDate && ListDate<=EndDate){
if(OrderStatus!="" && OrderList.indexOf(ListOrderID)!=-1)
{
Sheet.getRange("D"+(i+1)).setValue(OrderStatus);//寫回狀態
Sheet.getRange("G"+(i+1)).setValue(new Date());//寫回狀態
listAll[i]=Sheet.getSheetValues(i+1,1,1,LastColumn)[0];//重新讀取
}
data.push({data: listAll[i]})
}
}
//顯示資料
Logger.log(data);
// 回傳json資料
return ContentService.createTextOutput(JSON.stringify(data))
.setMimeType(ContentService.MimeType.JSON);
}

複製代碼

Francis · 發表於 2021-1-24 09:46:27

板主您好，請問一下，您這個寫法，為何訂單編號要放在第一欄[0]，而不是在第二欄[1]
這個寫法要注意什麼呢??

imingho · 發表於 2021-1-24 09:52:07

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

這個版本下禮拜四會錄解說版，放那一個欄位都可以，只是想說把它放在第1欄，網友就可以直接套用程式，或是其它欄位只要修改前端的。

html+="<td>"+'<input type=checkbox id="OrderID" value="'+obj[i].data[0]+'">'+i+"</td>";

複製代碼

這裡的0改就可以

Francis · 發表於 2021-1-24 18:47:05

謝謝板主，很期待您的影片，剛剛也參考您的內容，學習了不少知識。

Francis · 發表於 2021-2-4 11:15:46

板主您好，
昨日看完您分享的影片後，
我研究一下內容做了一個小修正，新增套入一個模糊搜尋的功能，但會出現查無資料，寫法如下，需要在跟您請益精進學習一下，想瞭解是什麼原因造成無法完成模糊搜尋這個問題。

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

<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
Date.prototype.format = function(fmt) {　　
var o = {　　　　
"M+": this.getMonth() + 1, //月份
　　　　"d+": this.getDate(), //日
　　　　"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小時
　　　　"H+": this.getHours(), //小時
　　　　"m+": this.getMinutes(), //分
　　　　"s+": this.getSeconds(), //秒
　　　　"q+": Math.floor((this.getMonth() + 3) / 3), //季度
　　　　"S": this.getMilliseconds() //毫秒
　　
};　　
if (/(y+)/.test(fmt))　　　　 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));　　
for (var k in o)　　　　
if (new RegExp("(" + k + ")").test(fmt))　　 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));　　
return fmt;
}
var dateReviver = function(key, value) {
var a;
if (typeof value === 'string') {
a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
if (a) {
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");
}
}
return value;
};
function inq() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = xmlhttp.responseText;
var obj = JSON.parse(result, dateReviver); //解析json字串為json物件形式
var html = '<table border=1 width=100%>'; //
for (var i = 0; i < obj.length; i++) { //
html += '<tr>'; //
if (i == 0)
html += "<td>編號</td>";
else
html += "<td>" + '<input type=checkbox id="OrderID" value="' + obj[i].data[0] + '">' + i + "</td>";
for (j = 0; j < obj[i].data.length; j++) {
html += '<td>' + obj[i].data[j] + '</td>';
}
html += '</tr>';
}
html += "</table>";
document.getElementById("order_status").innerHTML = html;
if (obj.length == 1) //只有一筆代表查不到資料
alert('查無資料');
}
}
var url = "https://script.google.com/macros/s/AKfycby6DNN-JoY1VY-2xcOucvbyTfBAE771bWyn3Ckwy8r3T8Uo1JiENVuxcg/exec";
var OrderID_list = "";
if (typeof(OrderID) !== 'undefined') {
for (var i = 0; i < OrderID.length; i++) {
if (OrderID[i].checked) {
OrderID_list += OrderID[i].value + ",";
}
}
if (OrderID_list.length > 0)
OrderID_list = OrderID_list.substr(0, OrderID_list.length - 1);
}
url += "?BeginDate=" + BeginDate.value + "&EndDate=" + EndDate.value + "&OrderID=" + OrderID_list + "&CName=" + CName.value + "&OrderStatus=" + OrderStatus.value;
console.log(url);
xmlhttp.open("get", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
輸入開始訂購日期：<input type="text" id="BeginDate" value="2020/02/01" /><br/> 輸入結束訂購日期：
<input type="text" id="EndDate" value="2020/02/10" /><br/> 姓名：
<input type="text" id="CName" value="" /><br/> 訂單狀況：
<input type="text" id="OrderStatus" value="" /><br/>
<input type="button" name="inq" value="查詢/更新" onclick="inq();"></br>
<span id="order_status"></span>
</body>
</html>

複製代碼

Google script後端代碼：

function doGet(e) {
//https://youtu.be/MQV3AlAOtCU 影音說明
var params = e.parameter;
var BeginDate = Date.parse(params.BeginDate);
var EndDate = Date.parse(params.EndDate);
var OrderID = params.OrderID;
var CName = params.CName;//姓名
//var OrderName=params.OrderName;
var OrderStatus = params.OrderStatus; //匯款後3碼
var OrderList = OrderID.split(",");
var Sheet = SpreadsheetApp.getActiveSheet();
var LastRow = Sheet.getLastRow();
var LastColumn = Sheet.getLastColumn();
var data = [];
// 取得全部資料
var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);
//存標題
data.push({ data: listAll[0] })
var ListDate; //儲存日期格式
var ListOrderID;
// 找尋資料是否有存在
for (var i = 1; i < listAll.length; i++) {
ListDate = listAll[i][1];
ListDate = Date.parse(ListDate);
ListOrderID = listAll[i][0];
//用訂單狀態做判斷，然後用switch
switch(OrderStatus=="")
{
case(OrderStatus==""):
if (ListDate >= BeginDate && ListDate <= EndDate) {
if (OrderStatus != "" && OrderList.indexOf(ListOrderID) != -1) {
Sheet.getRange("D" + (i + 1)).setValue(OrderStatus); //寫回狀態
Sheet.getRange("G" + (i + 1)).setValue(new Date()); //寫回狀態
listAll[i] = Sheet.getSheetValues(i + 1, 1, 1, LastColumn)[0]; //重新讀取
}
data.push({ data: listAll[i] })
}
break;
case(OrderStatus!=""&& listAll[i][2].indexOf(CName)!=-1):
if (BeginDate =='' && EndDate=='' && listAll[i][2].indexOf(CName)!=-1) {
if (OrderStatus != "" && OrderList.indexOf(ListOrderID) != -1) {
Sheet.getRange("D" + (i + 1)).setValue(OrderStatus); //寫回狀態
Sheet.getRange("G" + (i + 1)).setValue(new Date()); //寫回狀態
listAll[i] = Sheet.getSheetValues(i + 1, 1, 1, LastColumn)[0]; //重新讀取
}
data.push({ data: listAll[i] })
}
break;
}
}
//顯示資料
Logger.log(data);
// 回傳json資料
return ContentService.createTextOutput(JSON.stringify(data))
.setMimeType(ContentService.MimeType.JSON);
}

複製代碼

imingho · 發表於 2021-2-4 14:06:39

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

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

imingho · 發表於 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

Francis · 發表於 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呢??

<script type="text/javascript">
function chooseFun(number){
var message="";
switch (number) {
case "1" :
message ="你選擇的是1:汽車";
break;
case "2" :
message ="你選擇的是2:房子";
break;
case "3" :
message ="你選擇的是3:電腦";
break;
case "4" :
message ="你選擇的是4:電視";
break;
default:
message ="你選擇"+number+"的不在選項內";
break;
}
return message;
}
document.write(chooseFun("1") + "<br>");
document.write(chooseFun("2") + "<br>");
document.write(chooseFun("5") + "<br>");
</script>

複製代碼

imingho · 發表於 2021-2-18 13:55:37

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

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

imingho · 發表於 7 天前

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

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

		自動登錄	找回密碼
密碼			立即註冊