# Layui 弹出弹出层提交表单

全栈程序员

已于 2024-01-23 21:25:17 修改

阅读量3.7k

点赞数 7

分类专栏：前端开发文章标签： layui

于 2019-09-25 23:46:16 首次发布

本文链接：https://blog.csdn.net/qq_37248504/article/details/101396361

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Layui 弹出弹出层提交表单

文章目录

Layui 弹出弹出层提交表单
- 引入Layiu css、js
- 简单使用

Layui 官网：表单组件 form - Layui 文档

引入Layiu css、js

CDN 的方式引入

<!-- <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"> -->
<!-- 引入 layui.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" rel="stylesheet">

<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/layui.js">

简单使用

效果图如下：

在这里插入图片描述

表单测试

<html>
<head>
    <title>教师添加</title>
    <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"></head>

<body>

<form style="margin-top: 20px" class="layui-form" action="/teacher/add" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">教师姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" 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="account" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button style="display: none" lay-submit  id="tijiao" >立即提交</button>
</form>

</body>
</html>

完整表格列表和弹出form

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 本地 css -->
    <!-- <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"> -->
    <!-- 引入 layui.css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" rel="stylesheet">
</head>

<body>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm " lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            <button class="layui-btn layui-btn-sm toolbar layui-btn-danger" data-type="add"><i class="layui-icon layui-icon-add-1"></i>
                添加
            </button>
            <button class="layui-btn layui-btn-sm toolbar layui-btn-danger" data-type="batchdel"><i
                    class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
            <button  class="layui-btn layui-btn-sm refresh"><i class="layui-icon">&#xe669;</i>刷新</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>


    <!-- <script src="/../back/layui/layui.js" charset="utf-8"></script> -->
    <!-- <script src="/../back/layui/jquery/jquery-3.4.1.js" charset="utf-8"></script> -->
    <!-- 引入 layui.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: '/teacher/list'
                , toolbar: '#toolbarDemo'
                , title: '用户数据表'
                , totalRow: true
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'tId', title: 'ID', width: 250, fixed: 'left', unresize: true, sort: true }
                    , { field: 'name', title: '教师名', width: 120 }
                    , { field: 'name', title: '性别', width: 120 }
                    , { field: 'tno', title: '编号', width: 110, sort: true }
                    , { field: 'password', title: '密码', width: 250 }
                    , { field: 'pic', title: '头像', width: 200 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200 }

                ]]
                , page: true,
                limits: [9, 18, 27, 36, 45],
                limit: 9,  //默认采用25
                loading: true,
                autoSort: true
            });

            //工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        break;
                }
                ;
            });

            //表格行的工具栏
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('您确定要删除行吗？', function (index) {
                        $.ajax({
                            url: '/teacher/del',
                            data: {
                                id: data.id
                            },
                            success: function (json) {
                                table.reload('test');
                                layer.msg('删除成功');
                            }
                        });
                    })
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,  //打开一个iframe
                        title: '编辑留言',
                        content: '/teacher/edit' + data.id,
                        maxmin: true,
                        area: ['500px', '300px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var frm = layero.find('iframe').contents().find("#lay-form-submit");
                            frm.click();
                        }
                    });
                } else {
                    layer.open({
                        //打开一个iframe
                        type: 2,
                        title: '详细信息',
                        content: '/teacher/detail' + data.id,
                        maxmin: true,
                        area: ['500px', '300px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var frm = layero.find('iframe').contents().find("#lay-form-submit");
                            frm.click();
                        }
                    });
                }
            });
            // 排序
            table.on('sort(test)', function (obj) {
                console.log(obj.field);
                console.log(obj.type);
                console.log(this);

                table.reload('test', {
                    initSort: obj,
                    where: {
                        orderBy: obj.field,
                        orderDir: obj.type
                    }
                });
            });
            // toolbar工具栏
            var active = {
                batchdel: function () {
                    var checkData = table.checkStatus('test').data; //得到选中的数据
                    if (checkData.length === 0) {
                        layer.msg('请选择数据');
                        return false;
                    }

                    var idArr = [];
                    for (var i = 0; i < checkData.length; i++) {
                        idArr.push(checkData[i].id);
                    }
                    layer.confirm('确定删除吗？', function (index) {
                        $.ajax({
                            url: '/teacher/deletemore',
                            data: {
                                ids: idArr.join(',')
                            },
                            success: function (json) {
                                table.reload('test');
                                layer.msg('已删除');
                            }
                        });
                    });
                },
                add: function () {
                    layer.open({
                        // type: 2,
                        type: 1,
                        title: '增加',
                        // content: '/page/teacheradd',
                        content: '<div style="padding: 16px;">' +
                            '<form style="margin-top: 20px" class="layui-form" action="/teacher/add" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">教师姓名</label><div class="layui-input-block"><input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" 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="account" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-block"><input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><button style="display: none" lay-submit  id="tijiao" >立即提交</button></form>'
                            + '</div>',
                        maxmin: true,
                        area: ['500px', '300px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var frm = layero.find('iframe').contents().find("#tijiao");
                            frm.click();
                            layer.close(index)
                        }
                    });
                }
            };
            $('.toolbar').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</body>
</html>

全栈程序员

关注

7
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
2
评论
# Layui 弹出弹出层提交表单

表格组件 table 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求
复制链接

扫一扫