So verwenden Sie Laui, um ein Formular aufzurufen-Layui-Tutorial-php.cn

Heim

Web-Frontend

Layui-Tutorial

So verwenden Sie Laui, um ein Formular aufzurufen

尚

Jul 30, 2019 pm 05:11 PM

layui表单

So verwenden Sie Laui, um ein Formular aufzurufen

Verwenden Sie Laui, um auf das Popup-Formular zu klicken:

Klicken Sie auf das Popup-Fenster mit den persönlichen Informationen -up-Formular:

So verwenden Sie Laui, um ein Formular aufzurufen

1. Das erste ist das Klick-Popup-Ereignis der Seite.

 $(function () {        var studentId="";        if (&#39;${zyTb.sudentId}&#39; != null &&&#39;${zyTb.sudentId}&#39; != &#39;&#39;) {
            studentId=&#39;${zyTb.sudentId}&#39;;
        }        if (&#39;${univcollection.studentId}&#39; != null &&&#39;${univcollection.studentId}&#39; != &#39;&#39;) {
            studentId=&#39;${univcollection.studentId}&#39;;
        }        var studentName = &#39;&#39;;
        studentName = &#39;${gkzyUser.name}&#39;;
 
        $("#personaLinfoButton").click(function(){
            layer.open({
                type: 2,
                 //title: &#39;收藏管理 (考生姓名：张无忌)&#39;,
                title: &#39;个人信息&#39;,
                 shadeClose: true,           
                 //弹出框之外的地方是否可以点击
                offset: &#39;10%&#39;,                
                area: [&#39;60%&#39;, &#39;80%&#39;],                
                content: &#39;/gkzytb/franchiser/personaLinfo?gkzyUserId=&#39;+studentId                
                // content: &#39;/gkzytb/franchiser/rigthColumnJsonList&#39;
            });
        });
    });

2. Wenn Sie auf das Popup-Fenster klicken, fordern Sie den Controller auf, die Formulardaten darzustellen. Springen Sie gleichzeitig zur JSP-Seite mit der 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";
    }

3. Springen Sie über den Controller zur JSP-Seite von persistenceaLinfo.

<%@ 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"  ></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>

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vorByDDD

Will R.E.P.O. Crossplay haben?

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.