使用artdialog模态对话框实现新增等功能

:D :D :D :D
1.首先把整个artdialog的文件夹丢到项目中去
2.页面导入
<script type="text/javascript" src="<%=request.getContextPath()%>/thirdparts/dialog4/artDialog.js?skin=green"></script>
<script type="text/javascript" language="javascript" src="<%= request.getContextPath() %>/thirdparts/dialog4/plugins/iframeTools.js"></script>
其中skin=green 的green 代表风格,有blue black chrome 等
别忘了导入jquery
在这里举个例子吧:
首先写一个新增admin的界面
添加ajax提交的方法,此方式不支持文件上传
<script type="text/javascript">

function add(){
//jquery提供的一个方法,得到所有的参数,需要导入jquery
var postdata=$("#form1").serializeArray();

$.post('<%=request.getContextPath()%>/admin/add',postdata,function(data){
if(data=="yes"){
alert("新增成功");
//调用父窗口
var win = art.dialog.open.origin;
//调用父窗口刷新页面的方法
win.refreshData();
//关闭窗口
art.dialog.close();
}
},"text");
}
</script>

以上代码 在controller 中返回yes
*************************************************************************
然后是父窗口的界面 写的东西

<script type="text/javascript">
function refreshData(){
//刷新页面的方法有很多种
window.location=window.location;

};


//这个Addadmin()随便放在哪里的onclick事件上就可以了
function addAdmin(){
art.dialog.open('<%=request.getContextPath()%>/admin/add',{
width: '550px',
height: '300px',
title:'新增分类信息',
锁定父界面
lock:true,
设置透明度
opacity: 0.3,
ok:function(iframeWin, topWin){
// iframeWin: 对话框iframe内容的window对象
// topWin: 对话框所在位置的window对象
//调用添加的方法
iframeWin.add();//5

//防止窗口关闭
return false;
},
//添加取消按钮
cancel: true
})
}

************************************************************************
继续在写支持文件上传的
这里写两种实现的方式:
做法1：使用html5提供的新特性：FormData,
缺点:部分浏览器如果不支持H5,不能实现

var formdata = new FormData(document.getElementById("form1"));//可以上传文件

var url ="<%= request.getContextPath()%>/upload/demo1";
$.ajax({
url:url,
data:formdata, //name=zhangsan&age=50 {}
contentType: false,//默认: "application/x-www-form-urlencoded"
processData: false,//设置 processData 选项为 false，防止自动转换数据格式
type:"post",
dataType:"json",
success:function(data){
alert(data);
},
error:function(er){
alert(er.responseText);
}
});


******************************************************
做法2：使用jquery.form.js插件

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

var url ="<%= request.getContextPath()%>/upload/demo2";

$("#form1").ajaxSubmit({
type:'post',
url:url,
clearForm:true,//清空所有表单元素的值
resetForm:true,//重置所有表单元素的值
success:function(data){
alert(data);
},
error:function(XmlHttpRequest,textStatus,errorThrown){
alert("上传失败了");
}
});

***************************************************************
--奋斗的刘阿宝