layui标注页面 | 易学教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小区物业管理系统</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <script src="../layuiadmin/jquery-1.8.0.min.js"></script>
    <script src="../layuiadmin/configure.js"></script>
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启头部工具栏</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <b>公告管理</b>
                </div>

                <div class="layui-card-body">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">小区 </label>
                                <div class="layui-input-inline">
                                    <select name="manageAreaId" id="manageAreaId" lay-verify="" lay-search>
                                        <option value="">小区</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit
                                        lay-filter="select-">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <button class="layui-btn" data-type="reload" id="addAreaAnnouncement">添加公告</button>
                    </div>
                    <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                                class="layui-icon layui-icon-edit"></i>编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                                class="layui-icon layui-icon-delete"></i>删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<!--添加界面-->
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="add_announcements"
     style="padding-top: 30px; text-align: center; display: none">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">小区名称 <span style="color: red">*</span></label>
            <div class="layui-input-inline">
                <select name="addManageAreaId" id="addManageAreaId" lay-verify="" lay-search>
                    <option value="">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公告标题 <span style="color: red;">*</span></label></label>
            <div class="layui-input-inline">
                <input type="text" id="addannounceTitle" lay-verify="addannounceTitle" 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">
                <input type="text" id="addstartDate" lay-verify="addstartDate" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-inline">
                <input type="text" id="addendDate" lay-verify="addendDate" 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">
                <select name="" id="addstatus">
                    <option value="">请选择状态</option>
                    <option value="1">启用</option>
                    <option value="0">停用</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公告内容 <span style="color: red;">*</span></label>
            <div class="layui-input-inline">
                <textarea name="desc" id="addannounceDetails" lay-verify="addannounceDetails" placeholder="请输入内容"
                          class="layui-textarea"></textarea>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit" id="Add_announcement"><i class="fa fa-check-circle"></i> 保存
            </button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 取消</button>
        </div>
    </div>
</div>


<!--修改界面-->
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="update_areaAnnouncement"
     style="padding-top: 30px; text-align: center; display: none">

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

        <div class="layui-inline">
            <label class="layui-form-label">小区名称 <span style="color: red;">*</span></label>
            <div class="layui-input-inline">
                <input type="text" id="updatemanageAreaId" lay-verify="updatemanageAreaId" autocomplete="off"
                       class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公告标题</label>
            <div class="layui-input-inline">
                <input type="text" id="updateannounceTitle" lay-verify="updateannounceTitle" 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">
                <input type="text" id="updatestartDate" lay-verify="updatestartDate" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-inline">
                <input type="text" id="updateendDate" lay-verify="updateendDate" 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">
                <select name="" id="updatestatus">
                    <option value="">请选择状态</option>
                    <option value="1">启用</option>
                    <option value="0">停用</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公告内容</label>
            <div class="layui-input-inline">
               <textarea name="desc" id="updateannounceDetails" lay-verify="updateannounceDetails" placeholder="请输入内容"
                         class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div>
            <div class="layui-form-item timo-finally">
                <button class="layui-btn ajax-submit" id="updateareaAnnouncement"><i class="fa fa-check-circle"></i>
                    保存
                </button>
                <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 取消</button>
            </div>
        </div>
    </div>
</div>
<script src="../layuiadmin/layui/layui.js"></script>
<script>
    var user_phone = sessionStorage.getItem('phone');
    var user_password = sessionStorage.getItem('password');
    var manageAreaId = sessionStorage.getItem('manageAreaId');
    var manageAreaName = sessionStorage.getItem('manageAreaName');
    var companyId = sessionStorage.getItem('companyId');

    if (manageAreaId == 0) {
        manageAreaId = null;
    }


    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', "form", "laydate"], function () {
        var admin = layui.admin;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
var laydate = layui.laydate;

        laydate.render({
            elem: '#updatestartDate'
        });
        laydate.render({
            elem: '#addstartDate'
        });
        laydate.render({
            elem: '#addendDate'
        });
        laydate.render({
            elem: '#updateendDate'
        });
        getManageArea();
        //监听搜索
        //监听搜索
        form.on('submit(select-)', function(data){
            var field = data.field;
            //执行重载
            table.reload('test-table-toolbar', {
                where: field
            });
        });

            table.render({
                elem: '#test-table-toolbar'
                , url: Url + '/announcement/selectpage'
                , where: {
                    "companyId": companyId,
                    "manageAreaId": manageAreaId,
                    "announceTitle": '',
                    "announceDetails": '',
                    "startDate": '',
                    "endDate": '',
                    "status": '',
                    "createdTime": '',
                    "creatorId": '',
                    userPhone: user_phone,
                    userPassword: user_password
                }
                , method: 'post'
                , cols: [[
                    {field: 'manageAreaName', width: '120', title: '小区'},
                    {field: 'announceTitle', width: '120', title: '公告标题'},
                    {field: 'announceDetails', width: '400', title: '公告内容'},
                    {field: 'startDate', width: '120', title: '开始日期'},
                    {field: 'endDate', width: '120', title: '结束日期'},
                    {
                        field: 'status', width: '150', title: '状态',
                        templet: function (row) {
                            if (row.status == 0) {
                                return '禁用';
                            } else if (row.status == 1) {
                                return '启用';
                            }
                        }
                    },
                    {field: 'createdTime', width: '180', title: '创建时间'},
                    {field: 'creatorId', width: '120', title: '创建人'},
                    {field: 'classify', width: '150', title: '操作', toolbar: '#test-table-toolbar-barDemo'}
                ]]
                , page: true
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                   if (res.code==200){
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data[1], //解析数据长度
                    "data": res.data[0] //解析数据列表
                };
                }else{
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg //解析提示文本
                    };
                }
                }
                , done: function (res) {//成功后返回的参数
                    console.log(res);
                }
            });



        $("#addAreaAnnouncement").on("click", function () {
            layer.open({
                type: 1,
                title: "添加公告",
                area: ['800px', '700px'],
                content: $("#add_announcements")//引用的弹出层的页面层的方式加载修改界面表单
            });
        });
        table.on('tool(test-table-toolbar)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'del') {   //删除事件
                layer.confirm('确定删除？', function (index) {
//点击确定后的执行方法
                    $.ajax({
                        url: Url + "/announcement/deletebyid",
                        type: 'POST',
                        data: {
                            id: obj.data.id,

                            userPhone: user_phone,
                            userPassword: user_password
                        },
                        dataType: 'json',
                        contentType: 'application/x-www-form-urlencoded',
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg('删除成功！', {
                                    offset: '125px'
                                    , icon: 1
                                    , time: 800 //1秒后跳转
                                }, function () {
                                    layer.closeAll();//关闭所有的弹出层
//修改成功后刷新父界面
                                    obj.del();
                                    layer.close(index);
//                                    window.location.reload();
                                });
                            } else {
                                layer.msg('删除失败！' + data.msg, {
                                    offset: '125px'
                                    , icon: 1
                                    , time: 1000 //1秒后跳转
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {   //修改事件
                $('#updatemanageAreaId').val(obj.data.manageAreaName);
                $('#updateannounceTitle').val(obj.data.announceTitle);
                $('#updateannounceDetails').val(obj.data.announceDetails);
                $('#updatestartDate').val(obj.data.startDate);
                $('#updateendDate').val(obj.data.endDate);
                $('#updatestatus').val(obj.data.status);

                form.render();
                form.render('select');
                layer.open({
                    type: 1,
                    title: "修改公告信息",
                    area: ['800px', '700px'],
                    content: $("#update_areaAnnouncement")//引用的弹出层的页面层的方式加载修改界面表单
                });
            }

//修改用户
            $("#updateareaAnnouncement").on("click", function () {

                var announceTitle = $('#updateannounceTitle').val();
                var announceDetails =$('#updateannounceDetails').val();
                var startDate = $('#updatestartDate').val();
                var endDate = $('#updateendDate').val();
                var status = $('#updatestatus').val();
                if (announceTitle === '') {
                    layer.msg('公告标题不能为空', {icon: 5});
                    return;
                } else if (announceDetails === '') {
                    layer.msg('公告内容不能为空', {icon: 5});
                    return;
                } else
                    $.ajax({
                        url: Url + "/announcement/update",
                        type: 'POST',
                        data: {
                            id: obj.data.id,
                            announceTitle: announceTitle,
                            announceDetails: announceDetails,
                            startDate: startDate,
                            endDate: endDate,
                            status: status,

                            userPhone: user_phone,
                            userPassword: user_password
                        },
                        dataType: 'json',
                        contentType: 'application/x-www-form-urlencoded',
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg('修改成功！', {
                                    offset: '125px'
                                    , icon: 1
                                    , time: 800 //1秒后跳转
                                }, function () {
                                    layer.closeAll();//关闭所有的弹出层
//修改成功后刷新父界面
                                    window.location.reload();
                                });
                            } else {
                                layer.msg('修改失败！' + data.msg, {
                                    offset: '125px'
                                    , icon: 1
                                    , time: 1000 //1秒后跳转
                                });
                            }
                        }
                    });
            });


        });
        $("#Add_announcement").on("click", function () {
            var manageAreaId = $('#addManageAreaId').val();
            var manageAreaName = $('#addManageAreaId').find("option:selected").text();
            var announceTitle = $('#addannounceTitle').val();
            var announceDetails =$('#addannounceDetails').val();
            var startDate = $('#addstartDate').val();
            var endDate = $('#addendDate').val();
            var status = $('#addstatus').val();
            if (manageAreaId === '') {
                layer.msg('小区不能为空', {icon: 5});
                return;
            } else if (announceTitle === '') {
                layer.msg('公告标题不能为空', {icon: 5});
                return;
            } else if (announceDetails === '') {
                layer.msg('公告内容不能为空', {icon: 5});
                return;
            } else {
                $.ajax({
                        url: Url + "/announcement/add",
                        type: 'POST',
                        data: {
                            companyId: companyId,
                            manageAreaId: manageAreaId,
                            manageAreaName: manageAreaName,
                            announceTitle: announceTitle,
                            announceDetails: announceDetails,
                            startDate: startDate,
                            endDate: endDate,
                            status: status,

                            userPhone: user_phone,
                            userPassword: user_password
                        },
                        dataType: 'json',
                        contentType: 'application/x-www-form-urlencoded',
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg('添加成功！', {
                                    offset: '125px'
                                    , icon: 1
                                    , time: 800 //1秒后跳转
                                }, function () {
                                    layer.closeAll();//关闭所有的弹出层
//添加成功后刷新父界面
                                    window.location.reload();
                                });
                            } else {
                                layer.msg('添加失败！' + data.msg, {
                                    offset: '125px'
                                });
                            }
                        }
                    }
                );
            }
        })
        ;

    })
    ;

    //获取小区列表
    var getManageArea = function () {
        $.ajax({
            url: Url + '/manageArea/selectRun',
            type: 'POST',
            data: {
                "id": manageAreaId,
                "companyId": companyId,
                status: 1,
                userPhone: user_phone,
                userPassword: user_password
            },
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function (res) {
                if (res.code == 200) {
                    $('#addManageAreaId').empty();
                    $('#addManageAreaId2').empty();

                    $('#manageAreaId').empty();
                    if (manageAreaId==0||manageAreaId==null||manageAreaId=="manageAreaId"){
                        $('#manageAreaId').append('<option value=""></option>');
                    }
                    for (var a = 0; a < res.data.length; a++) {
                        $('#addManageAreaId').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
                        $('#manageAreaId').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
                        $('#addManageAreaId2').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
                    }
                    var select = 'dd[lay-value=' + manageAreaId + ']';// 设置value
                    layui.form.render("select");
                }
            }, error(err) {

            }

        })
    }
    /* 点击取消关闭修改的弹出层 */
    $(".close-popup").click(function (e) {
        layer.closeAll();//关闭所有的弹出层
    });
</script>

</body>
</html>
来源：https://www.cnblogs.com/ynhk/p/11525434.html
标签
form
data
input
select
按钮
lay
laydate