layui实现菜单的编辑、删除功能

原创2019-09-26 13:30:5311
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport&


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>后台管理</title>

    <link rel="stylesheet" href="./layui/css/layui.css">

    <link rel="stylesheet" href="./css/css.css">

</head>


<body>

    <div class="header">

        <span>管理员列表</span>

        <button type="button" class="layui-btn layui-btn-sm">添加</button>

    </div>

    <table class="layui-table">

        <thead>

            <tr>

                <th>ID</th>

                <th>用户名</th>

                <th>性别</th>

                <th>城市</th>

                <th>签名</th>

                <th>积分</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>孟子</td>

                <td>华夏族(汉族)</td>

                <td>公元前-372年</td>

                <td>猿强</td>

                <td>汉族</td>

                <td>1989-10-14</td>

                <td>

                    <button type="button" class="layui-btn" onclick="add()">编辑</button>

                    <button type="button" class="layui-btn scan" onclick="del()">删除</button>

                </td>

            </tr>

            <tr>

                <td>孟子</td>

                <td>华夏族(汉族)</td>

                <td>公元前-372年</td>

                <td>猿强</td>

                <td>汉族</td>

                <td>1989-10-14</td>

                <td>

                    <button type="button" class="layui-btn" onclick="add()">编辑</button>

                    <button type="button" class="layui-btn scan" onclick="del()">删除</button>

                </td>

            </tr>

            <tr>

                <td>孟子</td>

                <td>华夏族(汉族)</td>

                <td>公元前-372年</td>

                <td>猿强</td>

                <td>汉族</td>

                <td>1989-10-14</td>

                <td>

                    <button type="button" class="layui-btn" onclick="add()">编辑</button>

                    <button type="button" class="layui-btn scan" onclick="del()">删除</button>

                </td>

            </tr>

            <tr>

                <td>孟子</td>

                <td>华夏族(汉族)</td>

                <td>公元前-372年</td>

                <td>猿强</td>

                <td>汉族</td>

                <td>1989-10-14</td>

                <td>

                    <button type="button" class="layui-btn" onclick="add()">编辑</button>

                    <button type="button" class="layui-btn scan" onclick="del()">删除</button>

                </td>

            </tr>

            <tr>

                <td>孟子</td>

                <td>华夏族(汉族)</td>

                <td>公元前-372年</td>

                <td>猿强</td>

                <td>汉族</td>

                <td>1989-10-14</td>

                <td>

                    <button type="button" class="layui-btn" onclick="add()">编辑</button>

                    <button type="button" class="layui-btn scan" onclick="del()">删除</button>

                </td>

            </tr>

        </tbody>

    </table>

</body>

<script src="./layui/layui.js"></script>

<script>

    layui.use(['layer'], function () {

        layer = layui.layer;

        $ = layui.jquery;

    });


    // 删除

    function del() {

        layer.confirm('确定要删除么?', {

            icon: 2,

            btn: ['确定', '取消'] //可以无限个按钮

        }, function (index, layero) {

            //按钮【按钮一】的回调

        }, function (index) {

            //按钮【按钮二】的回调

        });

    }


    // 添加/编辑

    function add() {

        layer.open({

            type: 2,

            title: '添加管理员',

            area: ['480px', '420px'],

            content: 'add.html' //这里content是一个普通的String

        });

    }

</script>

</html>





//编辑页面

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>编辑</title>

    <link rel="stylesheet" href="./layui/css/layui.css">

    <link rel="stylesheet" href="./css/css.css">

</head>


<body>

    <form class="layui-form" action="">

        <div class="layui-form-item">

            <label class="layui-form-label">ID</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">用户名</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">性别</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">城市</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">签名</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">积分</label>

            <div class="layui-input-inline">

                <input type="text" name="text" class="layui-input">

            </div>

        </div>

        <button class="layui-btn layui-btn-warm baocun">保存</button>

    </form>

</body>

<script src="./layui/layui.js"></script>

</html>




批改老师:Peter-Zhu批改时间:2019-09-29 19:34:52
老师总结:代码看得很累, 下次放在代码块中提交, 并加上图片

发布手记

热门词条

第九期线上培训班