JEECG项目,采用的是标签式开发,这个在一定的程度上面大大的方便我们进行二次开发。用于表单验证的插件是Validform V5.3.1。 表单验证对应的标签类:FormValidationTag.java 因此我们需要对这个类进行改造,使其能够避免表单的重复提交。针对目前JEECG项目当中的添加、编辑页面大部分采用的是Jquery UI当中的dialog插件。在表单验证通过,进行提交之前我们需要在页面的上方增加一个遮罩,用于防止表单的再次提交。因此我们在点击提交按钮之后,再次的弹出一个对话框,用于做遮罩使用。
首先,初始化一个对话框的引用,方便后面可以进行关闭遮罩。
sb.append("<script type=\"text/javascript\">") //增加一个全局的js变量 sb.append("var subDlgIndex = null;"); sb.append("$(function(){"); ...初始化对话框:
/** * 增加显示加载图层 * @param sb */ private void submitLoading(StringBuffer sb) { sb.append("subDlgIndex = $.dialog({"); sb.append("content: '正在加载中'"); sb.append(",zIndex:19910320"); sb.append(",lock:true"); sb.append(",width:100"); sb.append(",height:50"); sb.append(",opacity:0.3"); sb.append(",title:'提示'"); sb.append(",cache:false"); sb.append(""); sb.append("});"); //对话框显示出来之后,我们将其隐藏,使用一个加载gif图片 sb.append("var infoTable = subDlgIndex.DOM.t.parent().parent().parent();"); sb.append("infoTable.parent().append('<div id=\"infoTable-loading\" style=\"text-align:center;\"><img src=\"plug-in/layer/skin/default/loading-0.gif\"/></div>');"); sb.append("infoTable.css('display','none');"); }对原有beforesubmit进行修订:
if (beforeSubmit != null) { sb.append("beforeSubmit:function(curform){var tag=false;"); submitLoading(sb); sb.append("return " + beforeSubmit ); if(beforeSubmit.indexOf("(") < 0){ sb.append("(curform);"); } sb.append("},"); }else{ sb.append("beforeSubmit:function(curform){var tag=false;"); submitLoading(sb); sb.append("},"); }之后我们需要在callback当中将遮罩对话框关闭和隐藏加载图片:
sb.append("callback:function(data){"); sb.append("if(subDlgIndex && subDlgIndex != null){"); sb.append("$('#infoTable-loading').hide();"); sb.append("subDlgIndex.close();"); sb.append("}"); ...到这里基本的添加、编辑页面我们均已对其增加响应的加载效果 但是这边还会有一个问题就是在导入数据,上传文件的时候,这个对应的遮罩对话框不会关闭。 我们需要再对UploadTag.java进行修订,让其在上传完成的时候,判断是否存在遮罩对话框,存在的话将其关闭:
"onQueueComplete : function(queueData) { "); if(dialog) { sb.append("var win = frameElement.api.opener;" +"win.reloadTable();" +"win.tip(serverMsg);" //判断是否存在遮罩对话框 +"if('undefined' != typeof subDlgIndex && subDlgIndex != null){" +"$('#infoTable-loading').hide();" +"subDlgIndex.close();" +"}" +"frameElement.api.close();");