> 웹 프론트엔드 > 레이이 튜토리얼 > Layui를 사용하여 양식을 팝업하는 방법

Layui를 사용하여 양식을 팝업하는 방법

풀어 주다: 2019-07-31 08:59:58
원래의
5961명이 탐색했습니다.

Layui를 사용하여 양식을 팝업하는 방법

layui를 사용하여 팝업 양식 클릭:

개인 정보 팝업 양식 클릭:

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. 팝업 창을 클릭하면 컨트롤러에 양식 데이터를 렌더링하도록 요청됩니다. 동시에 form

 @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";
    }
로그인 후 복사

양식이 포함된 jsp 페이지로 점프합니다. 3. 컨트롤러를 통해 personaLinfo의 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(&#39;form&#39;, function(){        var form = layui.form;        var $form = $(&#39;form&#39;);        //监听提交
        form.on(&#39;submit(formDemo)&#39;, function(data){

            $.post(&#39;studentInfoF&#39;,data.field,function (json) {
                layer.msg(&#39;修改成功!&#39;);
                setTimeout(function () {
                    parent.location.href=parent.location.href;
                },1000);
            })            return false;
        });
        form.on(&#39;select&#39;,function (data) {            if ($(data.elem).attr(&#39;name&#39;) == &#39;provid&#39;) {
                cityEvent(data.value,&#39;cityid&#39;);
            }else if($(data.elem).attr(&#39;name&#39;) == &#39;cityid&#39;){
                cityEvent(data.value,&#39;area&#39;);
            }

        });        function cityEvent(id, name) {
            $.post(&#39;findAreaJson&#39;,{id:id},function(json){                if (json.state == 0) {
                    $form.find(&#39;select[id=&#39;+name+&#39;]&#39;).html("");
                    $.each(json.data, function (kt, vt) {
                        appendOptionTo($form.find(&#39;select[id=&#39;+name+&#39;]&#39;), vt.name, vt.id);
                    });
                    form.render();                    if (name == &#39;cityid&#39;) {
                        cityEvent(json.data[0].id,&#39;area&#39;);

                    }
                }
            });
        }        function appendOptionTo($o, k, v) {            var $opt = $("<option>").text(k).val(v);
            $opt.appendTo($o);
        }
    });</script></html>
로그인 후 복사

추천: layui 프레임워크 튜토리얼

위 내용은 Layui를 사용하여 양식을 팝업하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿