1 選自君南渠道云項目,參考代碼 targetDate.jsp,targetDate.js,artDialog.jsp

2 artDiaLog封裝

<%-- 引入artDialog --%> <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <link href="<%=resourceUrl%>/js/artDialog4.1.7/skins/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=resourceUrl%>/js/artDialog4.1.7/artDialog.js"></script> <script type="text/javascript" src="<%=resourceUrl%>/js/artDialog4.1.7/plugins/iframeTools.js"></script> <script type="text/javascript" src="<%=curUrl%>/resources/js/dk/common/json2.js"></script> <style type="text/css"></style><script>/*** 彈出框* @param id 彈出框id* @param title 標題* @param lock 是否鎖屏* @param opacity 透明度 默認0.3* @param width 寬度 640* @param height 高度 280* @param content 頁面div id*/ function openDataDialog(id,title,lock,opacity,width,height,content) {art.dialog({id: id,title: title,lock: lock,opacity: opacity,width: width,height: height,content: content}).show(); }/** * 彈出框 有是否確定按鈕 * @param id 彈出框id * @param title 標題 * @param lock 是否鎖屏 * @param opacity 透明度 默認0.3 * @param width 寬度 640 * @param height 高度 280 * @param content 頁面div id * @param functionName 點擊ok觸發方法 * @param okValue ok按鈕名稱 * @param cancelValue 放棄按鈕名稱*/ function openDataDialogIsOk(id,title,lock,opacity,width,height,content,functionName,okValue,cancelValue) {return art.dialog({id: id,title: title,lock: lock,opacity: opacity,width: width,height: height,content: content,ok: functionName,okVal: okValue,cancelVal:cancelValue,cancel: function () {art.dialog({id:id}).close();$(".info").hide();}}).show(); }//彈出消息框dialog function alertDialog(message){art.dialog.alert(message) }/** * 彈出框 頁面嵌入url頁面 * @param url * @param width * @param height * @param lock * @param opacity * @param id * @param title * @param okValue * @param cancelValue * @param functionName*/ function urlDialog(url,width,height,lock,opacity,id,title,okValue,cancelValue,functionName){art.dialog.open(url, {id:id,title:title,width: width,height: height,lock: lock,opacity:opacity,okVal: okValue,ok: functionName,cancelVal:cancelValue,cancel: function () {art.dialog({id:id}).close()}}); }/** * 是否確定 操作 * @param content * @param title * @param okValue * @param cancelValue * @param functionName*/ function artConfirm(content,title,okValue,cancelValue,functionName){art.dialog({content: content,title: title,okValue:okValue,cancelValue: cancelValue,id: 'delArt',lock: true,opacity: 0.3,width: 280,height: 100,ok: functionName,cancel: function(){}}).show(); }function isConfirm(content,functionName){art.dialog.confirm(content, functionName,function () {}); }/*** 針對審批流程待辦中，操作成功后關閉彈出框* @param id* @param title* @param lock* @param opacity* @param width* @param height* @param content* @param functionName* @param okValue*/ function alertCloseWindow(id,title,lock,opacity,width,height,content,functionName,okValue) {art.dialog({id: id,title: title,lock: lock,opacity:opacity,width: width,height: height,content: content,ok: functionName,okVal: okValue}).show(); } /** * 用戶選擇對話框*/ function selectUsersDialog(options){if(!options) options={};if(!options.url) options.url=curUrl+"/common/configUser/index";if(!options.selectedUsers) options.selectedUsers=[];if(!options.ok) options.ok=function(){ };if(!options.cancel) options.cancel=function(){art.dialog({id:options.id}).close();};if(!options.width) options.width='82%';if(!options.height) options.height='75%';if(!options.lock) options.lock=true;if(!options.opacity) options.opacity=0.3;if(!options.id) options.id="user-"+Math.floor(Math.random()*1000);if(!options.title) options.title="用戶選擇";if(!options.okValue) options.okValue="確定";if(!options.cancelValue) options.cancelValue="取消";if(!options.isAuthority) options.isAuthority="";if(typeof(options.isCheckBox) == "undefined") options.isCheckBox=true;art.dialog.data('selectedUsers',JSON.stringify(options.selectedUsers));art.dialog.data('isCheckBox',options.isCheckBox);art.dialog.data('isAuthority',options.isAuthority);art.dialog.open(options.url, {id:options.id,title:options.title,width: options.width,height: options.height,lock: options.lock,opacity:options.opacity,okVal: options.okValue,ok: function(){var rows = this.iframe.contentWindow.$("#datagrid-personnel-granding").datagrid("getRows");options.ok(rows);},cancelVal:options.cancelValue,cancel:options.cancel}); } </script>
3 使用

//彈出導入對話框 var dialog = ""; function importExcelDialog() {//title,contentvar okFunction = function () {//yes按鈕return importExcel();};dialog = openDataDialogIsOk('importExcelDialog11', "Excel導入", true, 0.3, 'auto', 'auto', $("#importExcel")[0], okFunction, '提交', '取消'); }//excel上傳 function importExcel() {var fileName = $("#upload_file").val();if (fileName == null || "" == fileName) {alertDialog("請選擇上傳文件！");return false;} else if (fileName.indexOf(".xls") == -1) {alertDialog("上傳文件格式必須是xls(Excel2003)！");return false}$.messager.progress();$('#importExcelForm').form('submit', {url: curUrl + '/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/importExcel',onSubmit: function () {return true;},success: function (data) {$.messager.progress('close');$("#upload_file").val("");dialog.close();//關閉窗口//alert("data="+data)var data = eval('(' + data + ')');var message = data.message;if (data.status == 1) { //導入成功,2秒后刷新頁面setTimeout('window.location.href=curUrl+"/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/queryTargetDateList";', 2000); //上傳后刷新頁面，需要修改} else {//有時異常信息很多，需要滾動條message = '<div style="overflow-y: auto; overflow-x:hidden; width:400px;height:300px;"><img src="' + curUrl + '/resources/config/images/excelAddress.png"/><br>導入失敗！<br>' + message + '</div>';//加上圖片提示信息}openDataDialog("importExcelMessage", "提示信息", true, 0.3, "auto", "auto", message);},error: function () {alertDialog("網絡傳輸錯誤，請重試");}});return true; }
4 頁面代碼

<div id="importExcel" class="easyui-panel" style="display: none;width:500px"><form action="<%=curUrl%>/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/importExcel" method="post" id="importExcelForm" enctype="multipart/form-data" ><div style="height: 150px;"><table class="table2"><tbody><tr><td colspan="2" height="30">(1)Excel模板　<a href="<%=curUrl%>/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/downExcelModel" class="btn--md-primary">下載</a></td></tr><tr><td width="20%"><label class="label_cs">(2)選擇文件　</label></td><td width="75%"><input id="upload_file" name="file" type="file" class="inputxt" datatype="*" nullmsg="全部文件" errormsg="文件不能為空"></td><!--<td><div class="info"><span class="Validform_checktip">名稱不能為空</span><span class="dec"><s class="dec1">◆</s><s class="dec2">◆</s></span></div></td>--></tr><tr><td colspan="2"><div id="uploadError" style="display: none;">數據校驗中</div></td></tr></tbody></table></div></form> </div>
5 效果圖

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的artDiaLog弹出插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。