js–前臺雙擊域獲取數據實踐

通過點擊前臺雙擊錄入域,彈出模態框,展示數據,並且展示固定數量的數據,實現分頁功能。

1、首先在觸發雙擊事件(ondblclick)後,需要彈出一個窗口。

function ondbGuanLianADId(){
	adId = window.showModalDialog('getAdForMac.action', null ,'dialogHeight=500px; dialogWidth=420px;');
	var strs = adId;
	if(adId != undefined){
		document.getElementById("guanLianADId").value = strs.split(":")[0];
		document.getElementById("guanLianADName").value = strs.split(":")[1];
	}
}

a、這裡的窗口我采用的是showModalDialog方法

附幾種彈出方式:

window.open()

打開一個普通窗口

window.showModalDialog()

打開一個模態對話框, 必須先關閉它, 才能關閉打開它的父窗口.

window.showModelessDialog()

打開一個非模態對話框, 它的存在依賴於打開它的父窗口, 如果父窗口關閉, 此窗口也被關閉.

(窗口彈出詳見:https://www.cnblogs.com/codeyu/archive/2009/01/07/1370774.html)

b、註意第二行代碼的adId,這個是接受返回值的變量,變量不需要加var定義,直接寫就可以(原因未知,待查詢)

c、通過此方法第一個參數URL跳轉後臺Action(我使用的是struts2),獲取要展示在雙擊域內的數據。

2、彈出的模態對話框,代碼實現如下:


 


<script type="text/javascript">
function test(){
	window.returnValue = document.getElementById("name1").value;
	window.close();
}
</script>




	

a、詳見第18、19兩行,使用struts2標簽來展示後臺返回的數據。

b、當點擊select域觸犯雙擊事件後,調用js方法test(),使用window.returnValue返回數據到父頁面。

(子頁面與父頁面取值詳見:https://www.111cn.net/wy/js-ajax/46975.htm)

註意:

開發完後需要註意不同瀏覽器之間的兼容性。

詳見開發後的結果圖:

這裡的窗口我采用的是showModalDialog方法

發佈留言