JSP 工作上常用到的方法,特別發文紀錄一下。
這次的工作室要做 倉庫的實際盤點工作,
這小段代碼是要把一些 "物品的儲存位置" (簡稱儲位) 列出來
把這些儲位資料庫抓到後顯示在jsp上變成一個個按鈕,讓倉庫的工作人員可以根據網頁畫面點選,進行實際盤點貨物數量。
//當tab1 的 [ 選擇批次 ] 內容顯示出找到的資料ROW 而且在第一頁的 資料 出現了 按鈕 [ 執行盤點 ]
function tab2Qry(fileID) {
$.ajax({
type: "POST",
url: "listXXXXUpload", //上傳list相關的 Controller URL方法
async: true, //異步
cache: false,
data: {fileID: fileID}, //經由fileID 的輸入可以帶出這一批要查的物品們在那些儲位
success: function( data ) {
console.log(data);
//產生list 假設這裡有抓出來location資料從DB 目標table,資料庫內已存放詳細數據
var locations = '';//將先前的資料清空
//遍歷對每個元素進行
$.each(data.result, function(index, uploadCount) {
//console.log(uploadCount);
//呼叫方法tab2KeyLocation:
locations += '<button class="ui-button ui-corner-all" onclick = "tab2KeyLocation(\''+this.location+'\',\''+this.effectiveFlag+'\');">' + uploadCount.location + '</button>';
});
$('#location-display').html(locations); //將資料賦值進去位置
}
});
}
解釋:
函式 tab2Qry 接受 fileID 作為參數。
它使用 jQuery 的 $.ajax() 方法向伺服器發送 AJAX POST 請求。請求的 URL 是 "listXXXXUpload"。
請求的 data 物件包含了 fileID 參數。
在 AJAX 請求成功時,會執行 success 回調函式,並將回傳的 data 傳入。
在 success 回調函式內部,locations 變數被初始化為空字串。
$.each() 函式遍歷 data.result 陣列中的每一項。對於每一項,它生成一個 HTML 按鈕元素並附加到 locations 字串中。
生成的按鈕具有 onclick 屬性,該屬性呼叫 tab2KeyLocation 函式並傳入兩個參數:location 和 effectiveFlag。
這邊location 是儲位 如圖片 A1234 ; effectiveFlag是貨品的有效日期(例如肉鬆不開罐可放兩年~2025)
最後,將包含生成的按鈕的 locations 字串,使用 html() 方法指派給具有 ID 為 'location-display' 的 HTML 元素。
總的來說,這個函式根據從伺服器返回的資料動態生成按鈕並顯示在指定的 HTML 元素中。假設 tab2KeyLocation 函式在程式碼的其他地方定義,用於處理生成按鈕的點擊事件。
介紹代碼內提到的tab2KeyLocation 函式
function tab2KeyLocation(location, effectiveFlag) {
alert(location) //web測試 用來檢查是否有抓到資料,有抓到會跳出警示視窗寫location's value
alert(effectiveFlag) //web測試 用來檢查是否有抓到資料,有抓到會跳出警示視窗寫 effectiveFlag's value
$('#location-tableDis').html(location);//放入中間的表格,如圖
$('#effectiveFlag-tableDis').text(effectiveFlag);//放入中間的表格,如圖
這裡簡單把web頁面上的資料做移動帶入,參數是1.location是儲位 2.effectiveFlag是物品的效用期限例如 此商品保存期限為2年從2023到 2025-12-31。