Easyui通用訊息提示、提交表單、ajax請求
阿新 • • 發佈:2019-02-09
其實就是封裝了一下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); } } }); } });