jeesite使用$.jBox.open弹出一个窗体页面的实例
最近在做后台批量转班功能时jsp页面遇到需要弹出窗体功能，遇到很多坑，子窗体向父窗体传递值，父窗体向子窗体传递值等等，，我就直接贴代码了：
1.对应的js代码：
if($(".chooseUser").is(":checked")){//判断选中的元素
top.$.jBox.confirm("确定该同学需要转班吗？", "系统提示", function (v, h, f) {
if (v == "ok"){
top.$.jBox.open("iframe:${ctx}/user/userClassroomInfo/changeUserClassDialog?id="+s+"", "转班",$(top.document).width()-1100,$(top.document).height()-560,{
buttons:{"确认":"ok", "关闭":true},
submit:function(v,h,f){
if(v=="ok"){
//alert(1);
var datas=h.find("iframe")[0].contentWindow.$("#inputForm").serialize();
var url="${ctx}/user/userClassroomInfo/changeClass";
$.ajax({
url:url,
type:"post",
dataType:'json',
data:datas, //获取表单数据
success: function (data) {
if (data.dt="success") {
alert("转班成功");
window.parent.page();//调用父窗体方法，关闭子窗体刷新父窗体
window.parent.window.jBox.close(); //关闭子窗体
} else {
alert("转班失败");
window.parent.page();
window.parent.window.jBox.close();
}
}
});
window.location.reload();//主窗口刷新
}
}
});
}
}, {buttonsFocus: 1});
top.$('.jbox-body .jbox-icon').css('top', '55px');
}
2.子窗体form表单：
<form:form id="inputForm" modelAttribute="userClassroomInfo" action="${ctx}/user/userClassroomInfo/changeClass" method="post"
class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="control-group hide">
<label class="control-label">用户：</label>
<div class="controls">
<form:input path="user.id" id="ids" class="input-large" htmlEscape="false"/>
</div>
</div>
<div class="control-group">
<label class="control-label">所属学校：</label>
<div class="controls">
<%-- <form:input id="schoolInfoId" path="schoolInfo.id" htmlEscape="false" maxlength="64"
class="input-xlarge required" cssStyle="display: none;"
onchange=""/> --%>
<form:select id="schoolInfoId" path="schoolInfo.id" class="input-xlarge" onchange="school_campus_id_onDataList(this.value,1)">
<form:option value="" label=""/>
<form:options items="${sList}" itemLabel="schoolName" itemValue="id"/>
</form:select>
</div>
</div>
<div class="control-group">
<label class="control-label">所报校区：</label>
<div class="controls">
<form:select path="schoolCampus.id" class="input-xlarge"
onchange="school_campus_id_DropDownList_onChange(this.value)">
<form:option value="${userClassroomInfo.schoolCampus.id}"
label="${userClassroomInfo.schoolCampus.campusName}"/>
</form:select>
</div>
<script type="text/javascript">
//校区发生变化
school_campus_id_DropDownList_onChange = function (value) {
grade_id_onDataList($("#schoolInfoId").val(), value, 1);
}
//校区列表
function school_campus_id_onDataList(schoolInfoId, first) {
$.ajax({
type: "post",
data: {
schoolInfoId: schoolInfoId
},
url: "${ctx}/campus/schoolCampus/school_campus_choose_multiple_callback",
dataType: "json",
success: function (list) {
$('select[name="schoolCampus.id"]').empty();
$('select[name="schoolCampus.id"]').append("");
$.each(list, function (index, value) {
$('select[name="schoolCampus.id"]').append(" + value.campusName + "");
});
if (first != 0) {
$('select[name="schoolCampus.id"]').prev().select2("val", "");
} else {
$('select[name="schoolCampus.id"]').val('${userClassroomInfo.schoolCampus.id}');
}
//调取下级
grade_id_onDataList($("#schoolInfoId").val(), $('select[name="schoolCampus.id"]').val(), first);
}
});
}
</script>
</div>
<div class="control-group">
<label class="control-label">年级：</label>
<div class="controls">
<form:select path="gradeInfo.id" class="input-xlarge"
onchange="grade_id_onDataList_onChange(this.value)">
<form:option value="${userClassroomInfo.gradeInfo.id}" label="${userClassroomInfo.gradeInfo.name}"/>
</form:select>
</div>
<script type="text/javascript">
//年级发生变化
grade_id_onDataList_onChange = function (value) {
classroom_id_onDataList($("#schoolInfoId").val(), $('select[name="schoolCampus.id"]').val(),value, 1);
}
function grade_id_onDataList(schoolInfoId, schoolCampusId, first) {
$.ajax({
type: "post",
data: {
schoolInfoId: schoolInfoId,
schoolCampusId: schoolCampusId
},
url: "${ctx}/grade/gradeInfo/gradeInfo_choose_multiple_callback",
dataType: "json",
success: function (list) {
$('select[name="gradeInfo.id"]').empty();
$('select[name="gradeInfo.id"]').append("");
$.each(list, function (index, value) {
$('select[name="gradeInfo.id"]').append(" + value.name + "");
});
if (first != 0) {
$('select[name="gradeInfo.id"]').prev().select2("val", "");
} else {
$('select[name="gradeInfo.id"]').val('${userClassroomInfo.gradeInfo.id}');
}
classroom_id_onDataList($("#schoolInfoId").val(), $('select[name="schoolCampus.id"]').val(), $('select[name="gradeInfo.id"]').val(), first);
}
});
}
</script>
</div>
<div class="control-group">
<label class="control-label">班级：</label>
<div class="controls">
<form:select path="classroomInfo.id" class="input-xlarge">
<form:option value="${userClassroomInfo.classroomInfo.id}"
label="${userClassroomInfo.classroomInfo.name}"/>
</form:select>
</div>
<script type="text/javascript">
function classroom_id_onDataList(schoolInfoId, schoolCampusId, gradeInfoId, first) {
$.ajax({
type: "post",
data: {
schoolInfoId: schoolInfoId,
schoolCampusId: schoolCampusId,
gradeInfoId: gradeInfoId
},
url: "${ctx}/classroom/classroomInfo/classroom_choose_multiple_callback",
dataType:
"json",
success:
function (list) {
$('select[name="classroomInfo.id"]').empty();
$('select[name="classroomInfo.id"]').append("");
$.each(list, function (index, value) {
$('select[name="classroomInfo.id"]').append(" + value.name + "");
});
if (first != 0) {
$('select[name="classroomInfo.id"]').prev().select2("val", "");
} else {
$('select[name="classroomInfo.id"]').val('${userClassroomInfo.classroomInfo.id}');
}
}
});
}
</script>
</div>
<%-- <div class="form-actions" style="margin-button:0">
<shiro:hasPermission name="user:userClassroomInfo:edit"><input id="btnSubmit" class="btn btn-primary"
type="submit"
value="保 存"/> </shiro:hasPermission>
</div> --%>
</form:form>
里面一些表单元素替换掉就可以用了：