JEECG 避免表单重复提交
程序员文章站
2022-05-29 23:09:16
...
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();");