首页 / LAYUI / 怎么使用layui弹出表单

怎么使用layui弹出表单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了怎么使用layui弹出表单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7986字，纯文字阅读大概需要12分钟。

内容图文

怎么使用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、当点击弹出窗口之后，请求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弹出表单全部内容，希望文章能够帮你解决怎么使用layui弹出表单所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/282144.html

来源：【匿名】

【上一篇】layui怎么用【下一篇】PHP+MySQL+LayUI分页查询显示

更多 ►

【怎么使用layui弹出表单】教程文章相关的互联网学习教程文章

layui-执行Ajax提交的时候如何获取表单的元素【代码】

1.一个很简单的属性可以让我们获取表单的元素layui属性data.field, 2.详细使用代码如下 //监听提交form.on(‘submit(add)‘, function (data) {//发送异步，把数据提交给php$.ajax({type: ‘post‘,url: ‘/admin/user‘,dataType: ‘json‘,headers: {‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)},data: data.field,success: function (data) {//弹层提示添加成功，并且刷新父页面if (data.status == 0)...

Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

重载两次是因为搜索按钮用的是button改成<a class="layui-btn" data-type="reload">搜索</a>就可以了虽然我也不知道是什么原因原文：https://www.cnblogs.com/uzxin/p/11907012.html

00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？【代码】

html: <div ><div ><div >资料清单</div><div ><table lay-filter="serviceMaterialListTable"></table><script type="text/html" ><div ><button data-type="addMaterial">添加</button></div></script><script type="text/html" ><%--<a lay-event="editMaterial">编辑</a>--%><a lay-event="delMaterial">删除</a></script><script type="text/html" ><select name="type" lay-filter="service_material_type" autocompl...

在layui中使用form表单监听ajax异步验证注册的实例

今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use(form,function{});这种形式要引用form内置模板，下面是HTML全部代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>注册</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="keywords" content="雷小...

解决layui的使用以及针对select、radio等表单组件不显示的问题【图】

layui是国内一款界面比较整洁大方的ui框架，里面封装了很多前端开发常用的组件，通常我们直接过去就可以实现效果，可以提高我们的开发效率。使用步骤： 1、下载layui：https://www.layui.com 2、将layui文件夹复制到自己的项目里：3、在html页面引入相关的css和js: <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all"> //路径仅供参考 <script type="text/javascript" src=...

layuiform表单的动态渲染与vue.js之间的冲突解决方法（附代码）

本篇文章给大家带来的内容是关于layui form表单的动态渲染与vue.js之间的冲突解决方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。这次用layui 结合vue.js做项目，发现表单中，如select发送改变，动态渲染select时，发现页面不能渲染数据。在社区发现有些layui与vue.js表单冲突解决方案，这里提供一个很简单的方法，就是利用vue.js的钩子函数updated代码如下methods: {getResponse (){let _this =...

layui表单提交到后台自动封装到实体类的方法【图】

第一次用layui,正在摸索中,今天在学习layui的时候在项目中看到一个表单提交,表单的数据传到后台是怎么自动封装到实体类里面的呢? 1、表单中的每一项的name属性值，必须和你所封装的实体中的属性名字一一对应，如果不相同就无法封装。 2、假如你的实体有5个属性，而需要前台输入的只有4个。（假如还有一个属性是id，这个不用输入，由后台给出）。封装结束后，这个id属性的值就是null，你只需要自己再给它赋值就好了。需要用到的包j...

layui清空,重置表单数据的实例

最近在使用layui框架，在页面进行表单数据提交后，要是页面表单数据清空，依是有下面方法表单： <form class="layui-form" action="" lay-filter="addGoodsForm" id="addGoodsForm">主题内容 </form>jquery：//监听提交form.on(submit(upGoodsBtn), function(data){var formDate = data.field;console.log(formDate);$.ajax({url: /goods/saveGoodInfos,type: POST,data: formDate,dataType: json,success: function (data) {if (...

怎么使用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};$("#personaLi...

layui判断表单是否为空【图】

表单不能为空提交提醒：在做一个管理员系统的时候，有一个和后台对接的问题，就是前端表单提交过去的数据不能存在空白的字段。当时解决的方式是，使用原生js来进行DOM的操作，从而进行判断，弹框的操作。之后，在浏览社区的时候，发现，表单有一个事件onSubmit ，这个事件，可以理解为在表单提交前一刻会进行触发，这时候，我们可以给这个事件传递一个回调函数，并且在回调函数中，进行是否存在空白表单的验证代码，以及提醒的代码...

layui表单提交为什么有两次【图】

(1) 一般用layui导致提交两次，会想到的是在绑定on sumit的时候没有return false，导致没有把常规提交方式拦截下来，再次访问了action如果你想了解更多关于layui的知识。可以点击：layui教程form.on(submit(formDemo), function (data) {var fd = new FormData($(form)[0]);$.ajax({type: "POST",url: /admin/adduser.do,data: fd,async: false,cache: false,contentType: false,processData: false,success: function (res) {if (...

layui.js表单验证功能实例分享

本文主要介绍了layui.js实现的表单验证功能,结合实例形式分析了基于layui.js的事件监听、验证、判定等相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。该示例可针对文本框，手机，邮箱，textarea等格式进行验证首先引入如下文件：<script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external n...

layui.js实现的表单验证功能示例

这篇文章主要介绍了layui.js实现的表单验证功能,结合实例形式分析了基于layui.js的事件监听、验证、判定等相关操作技巧,对layui感兴趣的朋友可以参考下本篇文章本文实例讲述了layui.js实现的表单验证功能。分享给大家供大家参考，具体如下：该示例可针对文本框，手机，邮箱，textarea等格式进行验证首先引入如下文件：<script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="sty...