Layui网页模板

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员管理title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js">script>
head>
<body>
    <div class="layui-container">
        
        <form class="layui-form" id="addMember" lay-filter="addMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" 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="phone" lay-verify="required" lay-reqtext="电话不能为空" 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="regDate" class="layui-input" id="mydate_add">
                div>
            div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked>
                    <input type="radio" name="type" value="normal" title="普通">
                div>
            div>            
        form>
        
        <form class="layui-form" id="detailMember" lay-filter="detailMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" disabled>
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-input" disabled>
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">注册日期label>
                <div class="layui-input-block">
                    <input type="text" name="regDate" class="layui-input" id="mydate_detail" disabled>
                div>
            div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked disabled>
                    <input type="radio" name="type" value="normal" title="普通" disabled>
                div>
            div>        
        form>
         
         <form class="layui-form" id="editMember" lay-filter="editMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" 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="phone" lay-verify="required" lay-reqtext="电话不能为空" 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="regDate" class="layui-input" id="mydate_edit">
                div>
            div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked>
                    <input type="radio" name="type" value="normal" title="普通">
                div>
            div>        
        form>
       
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md12">
                <button class="layui-btn layui-btn-info" style="margin-top: 20px;" id="btnAdd">
                    <i class="layui-icon layui-icon-addition">i>
                    添加新会员
                button>
                <table lay-filter="member_list" class="layui-table" id="mytable">table>
            div>
        div>
    div> 
    <script>
        layui.use(["table","form","layer","laydate"],function(){
            var $ = layui.$;
            var table = layui.table; 
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            //加载日期
            laydate.render({
                elem:"#mydate_add",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });
            laydate.render({
                elem:"#mydate_detail",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });
            laydate.render({
                elem:"#mydate_edit",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });

            //渲染表格数据
            var inst = table.render({
                elem:"#mytable",
                url:'Member?method=findByPage',//此处需要指定后台数据接口地址
                cols:[[
                    {field: 'id', title: 'ID',  sort: true},
                    {field: 'name', title: '姓名'},
                    {field: 'phone', title: '电话'},
                    {field: 'type', title: '会员类型'},
                    {field: 'regDate', title: '注册时间'},
                    {field: 'right', title: '操作',toolbar:"#template",align:"center",width:180}
                ]],
                page:{
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    limit:3,
                    limits:[3,6]
                },
                request:{
                    pageName:'currentPage',
                    limitName: 'pageSize'
                },
            });

            //刷新表格
            function refreshTb() {
                table.reload("mytable", {
                    cols: [[
                        { field: 'id', title: 'ID', sort: true },
                        { field: 'name', title: '姓名' },
                        { field: 'phone', title: '电话' },
                        { field: 'type', title: '会员类型' },
                        { field: 'regDate', title: '注册时间' },
                        { field: 'right', title: '操作', toolbar: "#template", align: "center", width: 180 }
                    ]],
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        limit: 3,
                        limits: [3, 6]
                    }
                })
            }
            //添加按钮单击事件
            $("#btnAdd").click(function(){
                //打开弹出层完成添加操作
                $("#addMember")[0].reset();
                form.render();
                layer.open({
                    type: 1,
                    title: ['添加新会员','font-size:18px;font-weight:bold;'],
                    area:["700px","300px"],
                    content:$("#addMember"),
                    btn:["确定","取消"],
                    closeBtn:0,
                    scrollbar: true,
                    btnAlign:"c",
                    //将普通按钮设置为提交按钮
                    success:function (layero,index){
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter':"addbtn",
                            'lay-submit':''
                        });
                    },
                    //确定按钮提交表单
                    yes:function(index){
                        form.on("submit(addbtn)",function (){
                            //获取表单数据,参数是lay-filter,请求服务器完成添加
                           var data=form.val("addMember");
                            $.post("Member?method=add",data,function (obj){
                                if (obj.code>0){
                                    layer.msg(obj.msg,{icon:1});
                                }else{
                                    layer.msg(obj.msg,{icon:2});
                                }
                               layer.close(index);
                                refreshTb();
                            },"json");
                        })
                    },
                    cancle:function(){
                        layer.close();
                    }
                });
            });

            //工具条事件
            //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(member_list)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

                if (layEvent === 'details') { //查看
                    //回显会员数据
                 form.val("detailMember",data);
                    layer.open({
                        type: 1,
                        title: ['会员详情','font-size:18px;font-weight:bold;'],
                        area:["700px","300px"],
                        content:$("#detailMember"),
                        btn:["取消"],
                        closeBtn:0,
                        btnAlign:"c",
                        cancle:function(){
                            layer.close();
                        }
                    });
                } else if (layEvent === 'del') { //删除
                    layer.confirm('确定要删除吗', function (index) {
                        //向服务端发送删除指令
                        $.get("Member?method=delete&id="+data.id,function (obj){
                            if (obj.code>0){
                                layer.msg(obj.msg,{icon:1});
                            }else{
                                layer.msg(obj.msg,{icon:2});
                            }

                            refreshTb();
                        },"json")

                    });
                } else if (layEvent === 'edit') { //编辑
                    //回显示数据
                    form.val("editMember",data);
                    layer.open({
                        type: 1,
                        title: ['修改会员信息', 'font-size:18px;font-weight:bold;'],
                        area: ["700px", "300px"],
                        content: $("#editMember"),
                        btn: ["确定", "取消"],
                        closeBtn: 0,
                        scrollbar: true,
                        btnAlign: "c",
                        //将普通按钮设置为提交按钮
                        success:function (layero,index){
                            layero.addClass('layui-form');
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter':"editbtn",
                                'lay-submit':''
                            });
                        },
                        yes: function (index) {
                            form.on("submit(editbtn)",function (){
                                //获取表单数据,参数是lay-filter,请求服务器完成修改
                             let update= form.val("editMember");
                             update.id=data.id;
                                console.log(update);
                                $.post("Member?method=update",update,function (obj){
                                    if (obj.code>0){
                                        layer.msg(obj.msg,{icon:1});
                                    }else{
                                        layer.msg(obj.msg,{icon:2});
                                    }
                                    layer.close(index);
                                    refreshTb();
                                },"json")


                            });
                        },
                        cancle: function () {
                            layer.close();
                        }
                    });
                }
            });
        })
    script>
    <script type="text/html" id="template">
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">详情>></button>
    script>
body>
html>

你可能感兴趣的:(SpringMVC,layui,javascript,前端)