1. 程式人生 > >Easyui通用訊息提示、提交表單、ajax請求

Easyui通用訊息提示、提交表單、ajax請求

其實就是封裝了一下easyui自帶的功能使之更加方便, 提交表單時帶進度條

/* 
 *easyui通用js程式碼
 * 
 */

function showMessage(title,text){
	$.messager.show({
		title:title,
		msg:'<center>'+text+'</center>',
		timeout:2000,
		showType:'show',
		style:{
			right:'',
			top:document.body.scrollTop+document.documentElement.scrollTop,
			bottom:''
		}
	});
}


/**
  * 建立視窗 引數是json格式
  * @param url url  
  * @param title 視窗標題
  * @param callback 點選確定按鈕的回撥函式
  * @param width  視窗寬度 可以不指定
  * @param height 視窗高度 可以不指定
  * @param tools 新增額外按鈕
  */
 function createWindow(parament){
	 if(!parament)
		 return;
	 var win;
	 var tools = [];
	 if(parament.tools){
		 for(var i = 0;i<parament.tools.length;i++){
			 tools.push(parament.tools[i]);
		 }
	 }
	 if(parament.callback){
		 tools.push({
			 iconCls:'icon-ok',
			 text:$.messager.defaults.ok,
			 handler:parament.callback//呼叫回撥函式
			 
		 });
	 }
	 if(!parament.cancel){
		 tools.push({
			 text:$.messager.defaults.cancel,
			 iconCls:'icon-cancel',
			 handler:function(){
				 win.window("close");
			 }
		 });
	 }
	 var id = parament.id?'#'+parament.id:'#win';
	 win = $(id).dialog({
		 title:parament.title,
		 onLoad:parament.onLoad?parament.onLoad:function(){},
         width:parament.width?parament.width:$(window).width()>900?900:900*0.9,   
         left:parament.left?parament.left:null,
         top:parament.top?parament.top:null,
   	  	 height:parament.height?parament.height:$(window).height()>600?600:600*0.9,    
    	 modal:true,
    	 method:parament.method?parament.method:'get',
    	 queryParams:parament.queryParams?parament.queryParams:{},
    	 href:parament.url,
    	 buttons:tools
	 });
	 return win;
 }
 
 /**
  * 
  * @param parament 引數parament的說明 
  * 引數parament是一個json格式,名稱和用法和jquery ajax一致
  * 此方法僅僅是添加了ajax傳送請求時出現進度條
  * parament.progressText是進度條的提示文字  已預設國際化無特殊要求可不填
  * parament.autoCloseProgress 關閉進度條方式,預設在success回撥函式中關閉,設定為false則在回撥函式執行完畢後再關閉進度條
  */
 function Ajax(parament){
	 $.ajax({
		 type:parament.type?parament.type:"post",
		 url:parament.url,
		 data:parament.data,
		 dataType:parament.dataType,
		 async:parament.async!=undefined?parament.async:true,
		 beforeSend:function(XMLHttpRequest){
		   var text = $("#loadText").val();
		   if(parament.progressText)
			   text = parament.progressText;
      	   $.messager.progress({text:text}); 
      	   if(parament.beforeSend)
      		   parament.beforeSend(XMLHttpRequest);
         },
		 success:function(data){
			 if(parament.autoCloseProgress==undefined||parament.autoCloseProgress==true){
				 $.messager.progress("close");
			 	 parament.success(data);
			 }else{
				 parament.success(data);
				 $.messager.progress("close");
			 }
			 
		 },
		 error:function(request,error,exception){
			 $.messager.progress("close");
			 if(parament.error)
				 parament.error(request,error,exception);
			 else
				 alert("System error! "+error);
		 },
		 contentType:parament.contentType,
		 complete:parament.complete,
		 timeout:parament.timeout
	 });
 }
 
 /**
  * easyui FORM表單說明
  * @param id FORM的ID 如'#form'
  * @param parament json格式 名稱和原來的一樣 添加了progressText(進度條文字),dataType(設定dataType='json')回撥函式返回的值會自動轉換成json格式
  * parament.autoCloseProgress 關閉進度條方式,預設在success回撥函式中關閉,設定為false則在回撥函式執行完畢後再關閉進度條
  * parament.autoValidate 是否自動驗證,設定false不自動驗證表單,預設自動驗證在onSumit時驗證
  * parment.progress false表示不顯示進度條
  * parment.ok  配置createWindow使用的 確定按鈕,如傳入則用此方法控制該按鈕
  */
 function formSubmit(id,parament){
	 var form = $(id);
	 form.form({
			url:parament.url,
			novalidate:parament.novalidate?parament.novalidate:false,
			onSubmit:function(param){
				if((parament.autoValidate||parament.autoValidate==undefined)&&!form.form('validate'))
					return false;
				if(parament.progress){
					var text = $("#loadText").val();
					if(parament.progressText)
						text = parament.progressText;
			      	$.messager.progress({text:text}); 
				}
				if(parament.ok)
					parament.ok.linkbutton("disable");//禁用確定按鈕
				if(parament.onSubmit){
					if(parament.onSubmit(param)==false)
						return false;
				}
			},
			onLoadError :function(){
				if(parament.progress)
					$.messager.progress('close');
				if(parament.ok)
					parament.ok.linkbutton("enable");//啟用確定按鈕
				 if(parament.onLoadError)
					 parament.onLoadError();
			},
			success:function(data){
				if(!parament.dataType||(parament.dataType&¶ment.dataType.toLowerCase()=="json"))
					data = eval('(' + data + ')');  // form表單必須手動轉換為json   
				if(parament.progress){
					if(parament.autoCloseProgress==undefined||parament.autoCloseProgress==true){
						$.messager.progress("close");
					}
				}
				if(parament.ok)
					parament.ok.linkbutton("enable");//啟用確定按鈕
				parament.success(data);
		       
		    }    
		}).submit();
 }
使用方法:
var win = createWindow({
  			title:'新增資訊',
  			url:'${ctx}/toadd',
  			width:600,
  			height:340,
  			callback:function(){
  				formSubmit('#db_add_form', {
  					url:'${ctx}/add',
  					ok:$(this),
  					success:function(data){
  						if(data.success){
  							$("#db_grid").datagrid("reload");
  						}
  						if(data&&data.msg){
  							showMessage('提示',data.msg);
  						}
  					}
  				});
  			}
  		});