溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用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"; }3、通過controller跳轉到persionaLinfo的jsp頁面。
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>內蒙古高考志愿規劃-鄂爾多斯市微聯網絡科技有限責任公司</title> <meta name="keywords" content="內蒙古高考志愿規劃，原金鑰匙高考志愿指導站，高考志愿填報，專業測評，生涯規劃，高考提分，升學測評"/> <meta name="description" content="內蒙古最專業高考志愿填報規劃平臺，歷時八年鉆研，采用三年數據精準定位，面對面一對一指導，網站系統，手工excel系統，模擬演練系統免費開放" /> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" /></head><body><div style="margin: 25px 60px 0 0;"> <form class="layui-form" action="studentInfoF"> <input type="hidden" name="id" value="${student.id}"/> <input type="hidden" name="gkzyUserId" value="${student.gkzyUserId}"/> <input type="hidden" name="franId" value="${student.franId}"/> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="name" value="${student.name}" required lay-verify="required" placeholder="請輸入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性別</label> <div class="layui-input-block"> <input type="radio" name="sex" value="1" title="男" checked> <input type="radio" name="sex" value="0" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">民族</label> <div class="layui-input-block"> <input type="radio" name="nation" value="漢族" title="漢族" checked> <input type="radio" name="nation" value="蒙族" title="蒙族"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">郵箱</label> <div class="layui-input-block"> <input type="text" name="email" value="${gkzyUser.email}" required lay-verify="email" placeholder="請輸入郵箱" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">學校</label> <div class="layui-input-block"> <input type="text" name="middleSchool.name" value="${student.middleSchool.name}" required lay-verify="required" placeholder="請輸入學校" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地區</label> <div class="layui-input-inline"> <select class="w_30" name="provid" lay-filter="provid"> <c:forEach items="${areaList1}" var="area"> <option value="${area.id}">${area.name}</option> </c:forEach> </select> </div> <div class="layui-input-inline"> <select class="w_30" id="cityid" name="cityid" lay-filter="cityid"> <c:forEach items="${areaList2}" var="area"> <option value="${area.id}">${area.name}</option> </c:forEach> </select> </div> <div class="layui-input-inline"> <select class="w_30" id="area" name="area.id"> <c:forEach items="${areaList3}" var="area"> <option value="${area.id}">${area.name}</option> </c:forEach> </select> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">語文</label> <div class="layui-input-inline" style="width: 127px"> <input type="text" name="chineseScore" value="${student.chineseScore}" lay-verify="required|number" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 50px">數學</label> <div class="layui-input-inline" style="width: 127px"> <input type="text" name="englishScore" value="${student.englishScore}" lay-verify="required|number" autocomplete="off" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 50px">英語</label> <div class="layui-input-inline" style="width: 127px"> <input type="tel" name="url" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">綜合</label> <div class="layui-input-inline" style="width: 127px"> <input type="text" name="colligateScore" value="${student.colligateScore}" lay-verify="required|number" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 50px">總分</label> <div class="layui-input-inline" style="width: 127px"> <input type="text" name="actualScore" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 50px">投檔</label> <div class="layui-input-inline" style="width: 127px"> <input type="tel" name="applyScore" value="${student.applyScore}" lay-verify="required|number" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item" style="text-align: center"> <div class="layui-input-block" style="margin: initial"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form></div><script type="text/javascript" language="JavaScript" src="/static/layui/layui.js" ></script><script type="text/javascript" language="JavaScript" src="/static/gkzytb/js/jquery-1.12.4.min.js" ></script></body><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></html>關于使用layui框架怎么彈出表單就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
