怎么使用layui弹出表单
使用layui点击弹出表单:
点击个人信息弹出表单:
1、首先是页面的点击弹出事件。
$(function () { var studentId=""; if ('${zyTb.sudentId}' != null &&'${zyTb.sudentId}' != '') { studentId='${zyTb.sudentId}'; } if ('${univcollection.studentId}' != null &&'${univcollection.studentId}' != '') { studentId='${univcollection.studentId}'; } var studentName = ''; studentName = '${gkzyUser.name}'; $("#personaLinfoButton").click(function(){ layer.open({ type: 2, //title: '收藏管理 (考生姓名:张无忌)', title: '个人信息', shadeClose: true, //弹出框之外的地方是否可以点击 offset: '10%', area: ['60%', '80%'], content: '/gkzytb/franchiser/personaLinfo?gkzyUserId='+studentId // content: '/gkzytb/franchiser/rigthColumnJsonList' }); }); });
2、当点击弹出窗口之后,请求controller来渲染form表单数据。同时跳转到包含form表单的jsp页面
@RequestMapping("personaLinfo") public String personaLinfo(Student student,Model model){ Area area = new Area(); area.setParent(new Area("0")); List<area> areaList1 = areaService.findList(area); area.setParent(areaList1.get(0)); List<area> areaList2 = areaService.findList(area); area.setParent(areaList2.get(0)); List<area> areaList3 = areaService.findList(area); List<student> studentList = studentService.findList(student); if (studentList.size()>0) { model.addAttribute("student",studentList.get(0)); model.addAttribute("gkzyUser",gkzyUserService.get(studentList.get(0).getGkzyUserId())); } model.addAttribute("areaList1",areaList1); model.addAttribute("areaList2",areaList2); model.addAttribute("areaList3",areaList3); model.addAttribute("table","1"); return "modules/gkzytb/personal/personaLinfo"; }</student>
3、通过controller跳转到persionaLinfo的jsp页面。
nbsp;html> <meta> <title>内蒙古高考志愿规划-鄂尔多斯市微联网络科技有限责任公司</title> <meta> <meta> <link><div> <form> <input> <input> <input> <div> <label>姓名</label> <div> <input> </div> </div> <div> <label>性别</label> <div> <input> <input> </div> </div> <div> <label>民族</label> <div> <input> <input> </div> </div> <div> <label>邮箱</label> <div> <input> </div> </div> <div> <label>学校</label> <div> <input> </div> </div> <div> <label>地区</label> <div> <select> <foreach> <option>${area.name}</option> </foreach> </select> </div> <div> <select> <foreach> <option>${area.name}</option> </foreach> </select> </div> <div> <select> <foreach> <option>${area.name}</option> </foreach> </select> </div> </div> <div> <div> <label>语文</label> <div> <input> </div> </div> <div> <label>数学</label> <div> <input> </div> </div> <div> <label>英语</label> <div> <input> </div> </div> </div> <div> <div> <label>综合</label> <div> <input> </div> </div> <div> <label>总分</label> <div> <input> </div> </div> <div> <label>投档</label> <div> <input> </div> </div> </div> <div> <div> <button>立即提交</button> <button>重置</button> </div> </div> </form></div><script></script><script></script><script> layui.use('form', function(){ var form = layui.form; var $form = $('form'); //监听提交 form.on('submit(formDemo)', function(data){ $.post('studentInfoF',data.field,function (json) { layer.msg('修改成功!'); setTimeout(function () { parent.location.href=parent.location.href; },1000); }) return false; }); form.on('select',function (data) { if ($(data.elem).attr('name') == 'provid') { cityEvent(data.value,'cityid'); }else if($(data.elem).attr('name') == 'cityid'){ cityEvent(data.value,'area'); } }); function cityEvent(id, name) { $.post('findAreaJson',{id:id},function(json){ if (json.state == 0) { $form.find('select[id='+name+']').html(""); $.each(json.data, function (kt, vt) { appendOptionTo($form.find('select[id='+name+']'), vt.name, vt.id); }); form.render(); if (name == 'cityid') { cityEvent(json.data[0].id,'area'); } } }); } function appendOptionTo($o, k, v) { var $opt = $("<option>").text(k).val(v); $opt.appendTo($o); } });</script>
推荐:layui框架教程