layui中导航元素的简单使用

最新推荐文章于 2024-07-22 01:43:34 发布

ToBeXX

最新推荐文章于 2024-07-22 01:43:34 发布

阅读量8.2k

点赞数 8

分类专栏：原创文章标签： layui 导航元素的使用

本文链接：https://blog.csdn.net/weixin_43637570/article/details/101420375

版权

原创专栏收录该内容

22 篇文章 0 订阅

订阅专栏

整体效果图

在这里插入图片描述

所需界面

在这里插入图片描述

main.html界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style>
        /*对layui中的样式进行重写*/
        .layui-tab-content {
            padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
        }
        .show-frame {
            top: 50px!important;
            /*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
            overflow: hidden;/*消除浏览器最右边的滚动条*/
        }
        .frame {
            position: absolute;
            padding: 10px;/*与layui-footer隔开一段距离*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">医院分诊后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">模块管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" name="t1" id="1" title="科室管理" content="hospital-department.html">科室管理</a></dd>
                        <dd><a href="javascript:;" >文章列表</a></dd>
                        <dd><a href="javascript:;" >类别管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body show-frame">
        <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="empTab">
        <ul class="layui-tab-title">
            <li class="layui-this "><i class="layui-icon">&#xe68e;</i></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"><h1 style="color: #5FB878">欢迎登录医院分诊后台管理系统</h1></div>
        </div>
    </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="../src/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.$;
        $("[name=t1]").click(function () {
            var id = $(this).attr("id");
            var content = $(this).attr("content");
            if($("li[lay-id="+id+"]").length==0){
                element.tabAdd("empTab",{
                    title:$(this).attr("title"),
                    content:"<iframe src='"+content+"' class='frame' frameborder='0'></iframe>",
                    id:id
                })
            }
            element.tabChange('empTab',id)
        })

    });
</script>
</body>
</body>
</html>

hospital-department界面代码(参考代码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科室管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
    <lable class="layui-form-label">科室名</lable>
    <div class="layui-inline">
        <input class="layui-input" id="searchName" type="text">
    </div>
    <button type="button" class="layui-btn" id="searchAnything">
        <i class="layui-icon">&#xe615;</i>
    </button>
</div>

<table id="department" lay-filter="departmentTable">

</table>

<!---------------------添加科室表格 start------------------------------->
<form class="layui-form" id="addDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="insertFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">科室名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入科室名" autocomplete="off" 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="telephone" placeholder="输入科室电话" autocomplete="off" 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="area" placeholder="输入科室所在位置" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------添加文章表格 end------------------------------->
<!---------------------修改文章表格 start------------------------------->
<form class="layui-form" id="updateDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="updateFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">科室名称</label>
        <div class="layui-input-inline">
            <input type="hidden" name="id"/>
            <input type="text" name="name" 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="telephone"  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="area"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------修改文章表格 end------------------------------->

<!--===============添加、批量删除工具条 start===================-->
<script type="text/html" id="toolbar2">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteMany">批量删除</a>
</script>
<!--===============添加、批量删除工具条 end  ===================-->
<!--===============删除、修改工具条 start===================-->
<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<!--===============删除、修改工具条 end   ===================-->
<script>
    layui.use(["form","layer","table"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.$;

        table.render({
            elem:"#department",
            limit:5,
            limits:[5,10,15],
            url:"department/select.do",
            page:true,
            toolbar:"#toolbar2",
            cols:[[
                {type:"checkbox"},
                {field:"id",title:"科室编号"},
                {field:"name",title:"科室名称"},
                {field:"telephone",title:"科室电话"},
                {field:"area",title:"科室所在区域"},
                {title:"操作",toolbar:'#toolbar1'}
            ]]
        });

        //---------------search start------------------
        $("#searchAnything").click(function () {

            table.reload('department',{
                where:{
                    name:$("#searchName").val(),
                },
                page:{
                    curr:1
                }
            })
        })

        //----------------search end--------------------

        //----------------toolbar2（表头工具条） 绑定----------------------
        table.on('toolbar(departmentTable)',function (obj) {
            //获取到table表格的id
            var checkStatus = table.checkStatus(obj.config.id);

            console.log(obj.config.id)
            if(obj.event =='add'){

                layer.open({
                    type:1,
                    content:$("#addDepartment"),
                    area:["400px","350px"],
                    title:'添加科室'
                })
            }else if(obj.event == 'deleteMany'){
                var array = checkStatus.data;
                if(array.length == 0){
                    layer.msg("请至少选择一个复选框",{icon:5,time:2000});
                    return;
                }
                layer.confirm("检查一下别错删哦！",{icon:6},function () {
                    var ids = [];
                    for(var i=0;i<array.length;i++){
                        ids.push(array[i].id);
                    }
                    $.ajax({
                        url:"department/deleteMany.do",
                        data:"ids="+ids,
                        dataType:"json",
                        success:function (data) {
                            if(data.isDelete){
                                layer.msg("删除成功",{icon:6,time:2000});
                                table.reload('department')
                            }else{
                                layer.msg("删除失败",{icon:5,time:2000});
                            }
                        }
                    })
                })

            }
        })
        //----------------------------------------------

        //----------------toolbar1(内容工具条) 绑定----------------------
        table.on('tool(departmentTable)',function (obj) {
            if(obj.event =='update'){

                $.ajax({
                    url:"department/selectOne.do",
                    data:"id="+obj.data.id,
                    dataType:"json",
                    success:function (data) {
                        //val中填写form表单lay-Filter的值
                        form.val('updateFilter',{
                            id:data.id,
                            name:data.name,
                            telephone:data.telephone,
                            area:data.area,
                        })
                    }
                })
                layer.open({
                    type:1,
                    content:$("#updateDepartment"),
                    area:["400px","350px"],
                    title:'修改'
                })
            }else if(obj.event == 'delete'){
                layer.confirm("确定要删除吗？",{icon:5},function (index) {
                    var id = obj.data.id;
                    $.ajax({
                        url:"department/delete.do",
                        dataType:"json",
                        data:"id="+id,
                        success:function (data) {
                            if(data.isDelete){
                                layer.msg("删除成功",{icon:1,time:2000});
                                table.reload('department');
                            }
                        }

                    })
                })

            }
        })
        //----------------------------------------------
        //-------------------添加按钮绑定事件 start---------------------------
        form.on('submit(addSubmit)',function () {

            $.ajax({
                type:"post",
                url:"department/insert.do",
                data:$("#addDepartment").serialize(),
                success:function (data) {
                    if(data.isAdd){
                        /*layer.msg("图书添加成功", {icon: 1,time:3000});*/
                        $("#addDepartment")[0].reset();
                        layer.confirm("添加成功,要退出添加界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('department')
                    }
                },
                dateType:"json"
            });
            return false;
        });
        //-------------------添加按钮绑定事件 end---------------------------
        //-------------------修改按钮绑定事件 start-------------------------
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                type:"post",
                url:"department/update.do",
                data:$("#updateDepartment").serialize(),
                success:function (data) {
                    console.log(data)
                    if(data.isUpdate){
                        layer.confirm("修改成功,要退出修改界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('department')
                    }
                },
                dateType:"json"
            });
            return false;
        });

        //-------------------修改按钮绑定事件 end---------------------------
    })
</script>
</body>
</html>

ToBeXX

关注

8
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
layui中导航元素的简单使用

整体效果图所需界面main.html界面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" href="layui/css/...
复制链接

扫一扫