在管理網路商店或處理大量訂單時，最耗時的工作之一莫過於逐筆更新訂單狀態。無論是確認款項、標示出貨，或是處理退貨，重複的操作不僅效率低落，也容易出錯。最近有網友提到，希望能透過核取方塊（Checkbox）一次選取多筆訂單進行更新，為了解決這個常見的需求，我們將分享如何利用 Google Sheets 搭配 Apps Script 與簡單的 HTML 介面，打造一個實用的「訂單批次更新系統」。
這個系統能讓你先依據日期區間篩選出特定時段的訂單，再勾選需要變更的項目，最後一鍵完成狀態更新。讓我們一起來看看如何實現吧！
功能亮點 日期區間查詢： 可自訂起始與結束日期，精準撈出特定時間範圍內的訂單資料。
多筆批次選取： 使用核取方塊（Checkbox），自由勾選多筆需要更新的訂單。
一鍵批次更新： 輸入新的訂單狀態（例如：已付款、已出貨），點擊按鈕即可一次更新所有已選取的訂單。
直觀網頁介面： 透過簡單的 HTML 頁面操作，無需直接在 Google 試算表中手動修改。
系統成品展示 操作流程非常簡單：
在網頁介面上選擇想查詢的「起始訂購日期」與「結束訂購日期」。
點擊「查詢/更新」按鈕，系統會列出該區間內的所有訂單。
勾選您想更新狀態的訂單。
在「訂單狀況」欄位輸入新的狀態，例如「已付款」。
再次點擊「查詢/更新」按鈕，系統就會將更新寫回 Google 試算表。
教學步驟 首先，你需要一份儲存訂單資料的 Google 試算表。我們已經準備好一份範本，你可以直接複製使用。
點擊下方連結前往範本試算表：
建立副本： 點選左上角 檔案 > 建立副本 ，將這份試算表複製到你自己的雲端硬碟。這樣你才能對它進行編輯與操作。
這份範本包含訂單編號、日期、品名、訂單狀態等欄位，你可以根據自己的需求修改。請注意，此範例中， 「訂單編號」(A欄) 是唯一值 ，而**「日期」(B欄) 是查詢的依據**。
接下來，我們要為試算表加入後端處理邏輯。
在你剛剛建立的試算表副本中，點選 擴充功能 > Apps Script 。
將編輯器中原有的程式碼清空，並貼上下方的 Code.gs 程式碼。
點擊右上角的 部署 > 新增部署作業 。
在彈出的視窗中，點擊齒輪圖示，類型選擇 網頁應用程式 。
在「誰可以存取」的選項中，選擇 任何人 。
點擊 部署 ，並在接下來的權限審查中點擊 授予存取權 ，選擇你的 Google 帳戶並允許所有權限。
完成後， 複製產生的「網頁應用程式網址」 ，這個網址非常重要，下一步會用到。
Code.gs 程式碼：
function doGet (e ) var params = e.parameter;
var BeginDate = Date .parse(params.BeginDate);
var EndDate = Date .parse(params.EndDate);
var OrderId_list = params.OrderID_List;
var OrderStatus = params.OrderStatus;
var OrderList = OrderId_list ? OrderId_list.split(',' ) : [];
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("工作表1" );
var lastRow = sheet.getLastRow();
var data = [];
var listAll = sheet.getRange(1 , 1 , lastRow, sheet.getLastColumn()).getValues();
data.push(listAll[0 ]);
for (var i = 1 ; i < listAll.length; i++) {
var row = listAll[i];
var listDate = new Date (row[1 ]).getTime();
var listOrderID = row[0 ].toString();
if (listDate >= BeginDate && listDate <= EndDate) {
if (OrderStatus && OrderList.indexOf(listOrderID) !== -1 ) {
sheet.getRange(i + 1 , 4 ).setValue(OrderStatus);
sheet.getRange(i + 1 , 7 ).setValue(new Date ());
row = sheet.getRange(i + 1 , 1 , 1 , sheet.getLastColumn()).getValues()[0 ];
}
data.push(row);
}
}
return ContentService.createTextOutput(JSON .stringify(data))
.setMimeType(ContentService.MimeType.JSON);
}這個 HTML 檔案就是我們的操作介面。
在你的電腦上新增一個文字檔案，將其命名為 ordering.html 。
用記事本或任何程式碼編輯器打開它，貼上下方的 HTML 程式碼。
最重要的一步： 找到程式碼中的 var url = '...' 這一行，將引號內的網址替換成你在 步驟二 取得的 網頁應用程式網址 。
儲存檔案。
ordering.html 程式碼：
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > 訂單查詢與批次更新</title >
</head >
<body >
輸入起始訂購日期： <input type ="date" id ="BeginDate" value ="2020-02-01" > <br >
輸入結束訂購日期： <input type ="date" id ="EndDate" value ="2020-02-17" > <br >
訂單狀況： <input type ="text" id ="OrderStatus" /> <br >
<input type ="button" value ="查詢/更新" onclick ="searchOrders()" >
<div id ="order_status" > </div >
<script >
function searchOrders (var url = 'https://script.google.com/macros/s/AKfycbyo.../exec' ;
var beginDate = document .getElementById("BeginDate" ).value;
var endDate = document .getElementById("EndDate" ).value;
var orderStatus = document .getElementById("OrderStatus" ).value;
var checkboxes = document .getElementsByName("OrderID" );
var orderID_List = "" ;
for (var i = 0 ; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
orderID_List += checkboxes[i].value + "," ;
}
}
if (orderID_List.length > 0 ) {
orderID_List = orderID_List.substring(0 , orderID_List.length - 1 );
}
var finalUrl = url + "?BeginDate=" + beginDate + "&EndDate=" + endDate + "&OrderID_List=" + orderID_List + "&OrderStatus=" + orderStatus;
console .log("Request URL:" , finalUrl);
var xhr = new XMLHttpRequest();
xhr.open('GET' , finalUrl, true );
xhr.onreadystatechange = function (if (xhr.readyState == 4 && xhr.status == 200 ) {
var result = JSON .parse(xhr.responseText);
displayResults(result);
}
};
xhr.send();
}
function displayResults (data ) var html = '<table border="1" width="100%">' ;
if (data.length > 0 ) {
html += '<tr><th>選取</th>' ;
for (var j=0 ; j<data[0 ].length; j++){
html += '<th>' + data[0 ][j] + '</th>' ;
}
html += '</tr>' ;
for (var i = 1 ; i < data.length; i++) {
html += '<tr>' ;
html += '<td><input type="checkbox" name="OrderID" value="' + data[i][0 ] + '"></td>' ;
for (var k=0 ; k<data[i].length; k++){
var cellData = data[i][k];
if (k === 1 || k === 6 ) {
cellData = cellData ? new Date (cellData).toLocaleString() : '' ;
}
html += '<td>' + cellData + '</td>' ;
}
html += '</tr>' ;
}
} else {
html += '<tr><td colspan="8">查無資料</td></tr>' ;
}
html += '</table>' ;
document .getElementById("order_status" ).innerHTML = html;
}
</script >
</body >
</html >
將 ordering.html 檔案用你的瀏覽器（例如 Chrome、Edge）打開，你就可以開始操作這個系統了！
VIDEO
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。