1. 程式人生 > >使用easyui dialog 彈出框的一些注意事項

使用easyui dialog 彈出框的一些注意事項

使用easy ui 的dialog彈出框製作後臺管理系統時需要點選按鈕彈出個新的彈出框,為了保持每次點選顯示出來的資料都是重新渲染,從後臺獲取的,可以這樣來寫:
function piliangchuli(){
		$("<div/>").dialog({
			 title: '批量處理', 
			 id:'batchProcessing',
			 width: 920,    
			 height: 'auto',    
			 top:300,
			 closed: false, 
			 inline:false,
			 loadingMessage: '正在載入...',
			 cache: false,    
			 href :'../business/customermanagement/customerRelations/BatchProcessing.jsp',
			 modal: true,
			 onClose : function() {
		            $(this).dialog('destroy');
		            mmg.load();
		        },
		});		
	}

可以使用onclick觸發,然後$選擇器裡可以寫成<div/>,這樣操作過後關閉彈出框後,再彈出來時就不會保留上次彈出時留下來的操作痕跡,會重新渲染出來。

因為用的是easyui框架,所以就導致點選左邊選單欄彈出右邊的tab是用iframe標籤寫的,這樣就導致了一個問題,那就是那些在dialog裡的彈出框會只在當前父級的iframe頁面裡顯示,超出tab頁範圍時會被iframe標籤外的別的東西擋住,顯示不出來,說的簡單點就是dialog彈出框不在最上層顯示。在網上找原因是因為iframe與外面的div不是一個層級的,屬於跨域的問題了,所以可以用如下方法,使dialog在主頁呼叫就可以了:

function batchProcessing(){
	parent.piliangchuli();
}

這是在子頁面寫的(即iframe框架裡的頁面裡)。上面第一個寫的呼叫dialog時是在主頁面寫的,這樣就可以通過parent.function來溝通iframe和父頁面的溝通,不會存在跨越問題了。

這樣以後,本來以為問題都解決了,誰知道又出現問題了,因為雖然彈出框順利的在主頁面彈出來了(即最上層頁面),但是那個dialog頁面的js和css樣式都失效了,又上度娘查了一圈才發現調出dialog框時只會彈出body標籤裡面的內容,head標籤裡的樣式和js檔案都不會被引入,所以只能把這些引入檔案寫入body標籤裡才管用。。。

這樣折騰完後,終於發現js和css樣式出來了,但是不虧是網一青銅段位的擼手,這手速,又發現了一個BUG,那就是第一次點選時,dialog彈出來了,資料什麼的都很正常,但是當第二次點選時,就會報錯$().dialog() is not a function,dialog也不會彈出來~~無奈只能再次求助度娘,果然度娘沒叫我失望,說是由於主頁已經引入了jauery檔案,然後在dialog彈出框的body標籤裡又引入了jquery檔案,把它刪除了以後就好了~~

好了,目前使用easyui的dialog問題只有這麼多,說不定會不定期更新~~