layui后台管理框架应用

susan花雨

已于 2023-02-23 14:59:32 修改

阅读量2.3k

点赞数

分类专栏： web前端 # asp.net # 框架文章标签：前端 .net

于 2022-04-15 08:28:04 首次发布

本文链接：https://blog.csdn.net/qq_42711010/article/details/124178969

版权

web前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

asp.net

7 篇文章 1 订阅

订阅专栏

框架

1 篇文章 0 订阅

订阅专栏

layuimini应用实例1

layuimini后台管理框架应用过程
框架下载
下载的包解压后，可以直接发布到自己电脑的IIS（自行安装）查看效果，也可建立asp.net web应用程式项目，把以下文件复制到项目中
在这里插入图片描述
然后运行测试
测试结果如下图：

提示：将框架应用到asp.net web应用程式项目时，asp.net不允许访问.json文件
解决办法为：
web.config中添加:

<system.webServer>
    <staticContent>
       <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>

layui应用实例2

主页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="layUI.Main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css"/>   
</head>
<%--<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>--%>
    <body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <a href="#">
                <div class="layui-logo" style="color: #FFFFFF;">管理系统</div>
            </a>
             <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                     <a data-url="hello.html" data-id="1" data-title="首页" href="javascript:void(0);"
                           class="site-demo-active"
                           data-type="tabAdd">首页</a> 
                </li>    
                                           
        </ul> 
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login1.html">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:void(0);">用户管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a data-url="userInfo.html" data-id="11" data-title="个人中心" href="javascript:void(0);"
                                   class="site-demo-active"
                                   data-type="tabAdd">个人中心</a>
                            </dd>
                            <dd>
                                <a data-url="password.html" data-id="12" data-title="修改密码" href="javascript:void(0);"
                                   class="site-demo-active"
                                   data-type="tabAdd">修改密码</a>
                            </dd>
                            <dd>
                                <a data-url="userList.aspx" data-id="13" data-title="用户列表" href="javascript:void(0);"
                                   class="site-demo-active"
                                   data-type="tabAdd">用户列表</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:void(0);">系统管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a data-url="notice.html" data-id="21" data-title="公告管理" href="javascript:void(0);"
                                   class="site-demo-active"
                                   data-type="tabAdd">公告管理</a>
                            </dd>
                            <dd>
                                <a data-url="security.html" data-id="22" data-title="安全中心" href="javascript:void(0);"
                                   class="site-demo-active"
                                   data-type="tabAdd">安全中心</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">                     
                        <a data-url="" data-id="3" data-title="角色管理" href="javascript:void(0);"
                           class="site-demo-active"
                           data-type="tabAdd">角色管理</a>                            
                    </li>
                </ul>
            </div>
        </div>

        <!-- 选项卡和内容区 -->
        <div class="layui-tab" lay-filter="home-tabs" lay-allowclose="true" style="margin: 60px 0 0 200px;">
            <ul class="layui-tab-title"></ul>
            <ul class="rightmenu" style="display: none;position: absolute;">
                 <li data-type="refresh">刷新</li> 
                 <li data-type="now">关闭当前</li>                  
                 <li data-type="closeOthers">关闭其他</li>  
                 <li data-type="closeRight">关闭右边所有</li>           
                 <li data-type="closeAll">关闭所有</li>
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>

        <!-- 底部固定区域 -->
        <div class="layui-footer" style="text-align: center">
            底部固定区域
        </div>
    </div>    
    <script src="layui/jquery-1.11.0.min.js"></script>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('element', function () {
            var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块                    
            //触发事件
            var active = {
                //在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function (url, id, name) {
                    //新增一个Tab项 传入三个参数，分别是tab页面的地址，还有一个规定的id，对应其标题，是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('home-tabs', {
                        title: name,
                        content: '<iframe id="aaa" data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
                            '" style="width:100%;height:99%;"></iframe>',
                        id: id //规定好的id
                    })
                    //通过鼠标mouseover事件  动态将新增的tab下的li标签绑定鼠标右键功能的菜单
                    //下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据
                    $(".layui-tab-title li[lay-id=" + id + "]").mouseover(function () {
                        var tabId = $(this).attr("lay-id");
                        CustomRightClick(tabId); //给tab绑定右击事件
                        FrameWH(); //计算ifram层的大小
                    });
                },
                tabChange: function (id) {
                    //切换到指定Tab项 
                    element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete('home-tabs', id); //删除
                },
                tabRefresh: function (id) { //刷新页面
                    $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //刷新框架
                }
            };

            //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-demo-active').on('click', function () {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

            function CustomRightClick(id) {
                //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
                $('.layui-tab-title li').on('contextmenu', function () {
                    return false;
                })
                $('.layui-tab-title,.layui-tab-title li').click(function () {
                    $('.rightmenu').hide();
                });
                //单击取消右键菜单
                $('body,#aaa').click(function () {
                    $('.rightmenu').hide();
                });
                //tab点击右键
                $('.layui-tab-title li').on('contextmenu', function (e) {
                    var popupmenu = $(".rightmenu");
                    popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                    //判断右侧菜单的位置
                    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                    popupmenu.css({
                        left: l,
                        top: t
                    }).show(); //进行绝对定位
                    return false;
                });
            }

            $(".rightmenu li").click(function () {
                //当前的tabId
                var currentTabId = $(this).attr("data-id");

                if ($(this).attr("data-type") == "closeOthers") { //关闭其他
                    var tabtitle = $(".layui-tab-title li");
                    $.each(tabtitle, function (i) {
                        if ($(this).attr("lay-id") != currentTabId) {
                            active.tabDelete($(this).attr("lay-id"))
                        }
                    })
                } else if ($(this).attr("data-type") == "closeAll") { //关闭全部
                    var tabtitle = $(".layui-tab-title li");
                    $.each(tabtitle, function (i) {
                        active.tabDelete($(this).attr("lay-id"))
                    })

                } else if ($(this).attr("data-type") == "refresh") { //刷新页面
                    active.tabRefresh($(this).attr("data-id"));

                } else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有
                    //找到当前聚焦的li之后的所有li标签 然后遍历
                    var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");
                    $.each(tabtitle, function (i) {
                        active.tabDelete($(this).attr("lay-id"))
                    })                   
                }
                else if ($(this).attr("data-type") == "now") { //关闭右边所有                   
                        active.tabDelete($(this).attr("lay-id"))                    
                }

                $('.rightmenu').hide();
            });

            //导航栏点击选中时关闭其他选项卡
            $('.layui-nav-item').click(function () {
                $(this).siblings('li').attr('class', 'layui-nav-item');
            });

            function FrameWH() {
                var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                $("iframe").css("height", h + "px");
            }

            $(window).resize(function () {
                FrameWH();
            })

            //打开默认页面
            active.tabAdd("hello.html", 1, "首页");
            active.tabChange(1);
        });
    </script>
</body>
</html>

用户列表页面

页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="userList.aspx.cs" Inherits="layUI.userList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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, maximum-scale=1"/>    
    <link href="layui/css/layui.css" rel="stylesheet" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all"/>
</head>
<body>
    <form id="form1" runat="server">
     <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" 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" name="sex" 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" name="city" 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" name="classify" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
                </div>
            </script>
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            </script>
        </div>
    </div>  
    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: '../data/table.json',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", width: 50 },
                    { field: 'id', width: 80, title: 'ID', sort: true },
                    { field: 'username', width: 80, title: '用户名' },
                    { field: 'sex', width: 80, title: '性别', sort: true },
                    { field: 'city', width: 80, title: '城市' },
                    { field: 'sign', title: '签名', minWidth: 150 },
                    { field: 'experience', width: 80, title: '积分', sort: true },
                    { field: 'score', width: 80, title: '评分', sort: true },
                    { field: 'classify', width: 80, title: '职业' },
                    { field: 'wealth', width: 135, title: '财富', sort: true },
                    { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });

                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        searchParams: result
                    }
                }, 'data');

                return false;
            });

            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/add.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') {  // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {

                    var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/edit.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });

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

json代码

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {
      "id": 10000,
      "username": "user-0",
      "sex": "女",
      "city": "城市-0",
      "sign": "签名-0",
      "experience": 255,
      "logins": 24,
      "wealth": 82830700,
      "classify": "作家",
      "score": 57
    },
    {
      "id": 10001,
      "username": "user-1",
      "sex": "男",
      "city": "城市-1",
      "sign": "签名-1",
      "experience": 884,
      "logins": 58,
      "wealth": 64928690,
      "classify": "词人",
      "score": 27
    },
    {
      "id": 10002,
      "username": "user-2",
      "sex": "女",
      "city": "城市-2",
      "sign": "签名-2",
      "experience": 650,
      "logins": 77,
      "wealth": 6298078,
      "classify": "酱油",
      "score": 31
    },
    {
      "id": 10003,
      "username": "user-3",
      "sex": "女",
      "city": "城市-3",
      "sign": "签名-3",
      "experience": 362,
      "logins": 157,
      "wealth": 37117017,
      "classify": "诗人",
      "score": 68
    },
    {
      "id": 10004,
      "username": "user-4",
      "sex": "男",
      "city": "城市-4",
      "sign": "签名-4",
      "experience": 807,
      "logins": 51,
      "wealth": 76263262,
      "classify": "作家",
      "score": 6
    },
    {
      "id": 10005,
      "username": "user-5",
      "sex": "女",
      "city": "城市-5",
      "sign": "签名-5",
      "experience": 173,
      "logins": 68,
      "wealth": 60344147,
      "classify": "作家",
      "score": 87
    },
    {
      "id": 10006,
      "username": "user-6",
      "sex": "女",
      "city": "城市-6",
      "sign": "签名-6",
      "experience": 982,
      "logins": 37,
      "wealth": 57768166,
      "classify": "作家",
      "score": 34
    },
    {
      "id": 10007,
      "username": "user-7",
      "sex": "男",
      "city": "城市-7",
      "sign": "签名-7",
      "experience": 727,
      "logins": 150,
      "wealth": 82030578,
      "classify": "作家",
      "score": 28
    },
    {
      "id": 10008,
      "username": "user-8",
      "sex": "男",
      "city": "城市-8",
      "sign": "签名-8",
      "experience": 951,
      "logins": 133,
      "wealth": 16503371,
      "classify": "词人",
      "score": 14
    },
    {
      "id": 10009,
      "username": "user-9",
      "sex": "女",
      "city": "城市-9",
      "sign": "签名-9",
      "experience": 484,
      "logins": 25,
      "wealth": 86801934,
      "classify": "词人",
      "score": 75
    }
  ]
}