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("<option value=''> 全部</option>");
                        $.each(list, function (index, value) {
                            $('select[name="schoolCampus.id"]').append("<option value='" + value.id + "'>" + value.campusName + "</option>");
                        });
                        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("<option value=''> 全部</option>");
                        $.each(list, function (index, value) {
                            $('select[name="gradeInfo.id"]').append("<option value='" + value.id + "'>" + value.name + "</option>");
                        });
                        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("<option value=''> 全部</option>");
                            $.each(list, function (index, value) {
                                $('select[name="classroomInfo.id"]').append("<option value='" + value.id + "'>" + value.name + "</option>");
                            });
                            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="保 存"/>&nbsp;</shiro:hasPermission>
    </div> --%>
</form:form>

里面一些表单元素替换掉就可以用了:

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值