LayUI框架

一、引言1.1 介绍LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。可是很遗憾的是，贤心大神因为各种因素吧，从官网迁走了不过layui中的些许知识对我们而言还是挺好用的，我们也可以通过镜像网站Layui - 经典开源模块化前端 UI 框架layui 是一套开源

文章共7,392字 · 阅读需要大约25分钟

一键AI生成摘要，助你高效阅读

问答

宇智波波奶茶

22451人浏览 · 2021-10-25 21:40:04

宇智波波奶茶 · 2021-10-25 21:40:04 发布

一、引言

1.1 介绍

LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。

可是很遗憾的是，贤心大神因为各种因素吧，从官网迁走了

不过layui中的些许知识对我们而言还是挺好用的，

我们也可以通过镜像网站

Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。https://www.layui.site/

进行访问和查询。

二、环境搭建

2.1 下载

在镜像网站即可完成下载

下载LayUI

2.2 导入依赖

下载的LayUI解压后，将其中的layui目录导入项目中

解压后的 layui目录

将layui目录放到项目的webapp目录下

在JSP中导入layui依赖

三、页面元素

3.1.栅格布局.html

响应式栅格布局，每行分 12 等分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>栅格系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<!-- layui-container居中显示有固定尺寸；layui-fluid占满行宽 -->
<!--<div class="layui-container">-->
    <div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md9 layui-col-lg6 layui-bg-orange">
            你的内容 9/12
        </div>
        <div class="layui-col-md3 layui-col-lg6 layui-bg-gray">
            你的内容 3/12
        </div>
    </div>

    <!--移动设备、平板、桌面端的不同表现：-->
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
            移动：6/12 | 平板：6/12 | 桌面：4/12;
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
            移动：6/12 | 平板：6/12 | 桌面：4/12;
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-col-lg3">
            移动：4/12 | 平板：12/12 | 桌面：4/12;
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md4 layui-col-lg3">
            移动：4/12 | 平板：7/12 | 桌面：4/12;
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md8 layui-col-lg3">
            移动：4/12 | 平板：5/12 | 桌面：8/12;
        </div>
    </div>
</div>

</body>
</html>

可以看到，当在电脑页面上显示的时候，栅格布局第一行分为了四个模块，大家也可以将页面放大，当放大到平板的尺寸的时候，

3.2.图标.html

class="layui-icon 具体的图标样式"(访问的时候一定要通过服务器，也就是自己打开一个网页，输入网址进行访问，而不是直接点IDEA右上角那个网页！！！)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="layui/css/layui.css">

</head>

<!-- 引入js -->
<script type="application/javascript" src="layui/layui.js"></script>

<body>
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
<i class="layui-icon layui-icon-wifi" style="font-size: 30px;  color: #1E9FFF;"></i>
</body>
</html>

3.3.动画.html

LayUI提供了动画支持

这个是调节动画的时间用的

<style>
        /*<!--        调节动画的时间-->*/
        .layui-anim{animation-duration: 3s; -webkit-animation-duration: 3s;}
    </style>

样式类	描述
layui-anim-up	从最底部往上滑入
layui-anim-upbit	微微往上滑入
layui-anim-scale	平滑放大
layui-anim-scaleSpring	弹簧式放大
layui-anim-fadein	渐现
layui-anim-fadeout	渐隐
layui-anim-rotate	360度旋转
追加：layui-anim-loop	循环动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="layui/css/layui.css">

    <style>
        /*<!--        调节动画的时间-->*/
        .layui-anim{animation-duration: 3s; -webkit-animation-duration: 3s;}
    </style>

</head>

<!-- 引入js -->
<script type="application/javascript" src="layui/layui.js"></script>

<body>
<div class="layui-anim layui-anim-up layui-anim-loop">循环动画</div>
<hr>
<div class="layui-anim layui-anim-down">顶部下滑</div>
<hr>
<div class="layui-anim layui-anim-fadeout">渐隐</div>
<hr>
<!-- 整个div会在页面显示时，以特定动画显示出来 -->
<div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
<!-- 额外添加样式类：layui-anim-loop 使得动画循环运行 -->
<!--这里可以把图标加入里面，实现平常咱们所看到的等待的图像-->
<div class="layui-anim  layui-anim-rotate layui-anim-loop"
     style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">
    <i class="layui-icon layui-icon-loading"></i>
</div>
<div class="layui-anim  layui-anim-rotate layui-anim-loop"
     style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">
    <i class="layui-icon layui-icon-loading-1"></i>
</div>
</body>
</html>

3.4.按钮.html

class="layui-btn 主题样式"

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<button type="button" class="layui-btn layui-btn-warm">添加</button>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-border-blue">跳转</a>

<button type="button" class="layui-btn">标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm  layui-btn-radius ">
       <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
       带图标的按钮
</a>

</body>
</html>

3.5.表单.html

class="layui-form"

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<form class="layui-form" action="http://www.baidu.com">
       <div class="layui-form-item">
           <label class="layui-form-label">输入框</label>
           <div class="layui-input-block">
               <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">密码框</label>
           <div class="layui-input-inline">
               <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
           </div>
           <div class="layui-form-mid layui-word-aux">辅助文字</div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">选择框</label>
           <div class="layui-input-block">
               <select name="city" lay-verify="required">
                   <option value=""></option>
                   <option value="0">北京</option>
                   <option value="1">上海</option>
                   <option value="2">广州</option>
                   <option value="3">深圳</option>
                   <option value="4">杭州</option>
               </select>
           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">复选框</label>
           <div class="layui-input-block">
               <input type="checkbox" name="like[write]" title="写作">
               <input type="checkbox" name="like[read]" title="阅读" checked>
               <input type="checkbox" name="like[dai]" title="发呆">
           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">开关</label>
           <div class="layui-input-block">
               <input type="checkbox" name="switch" lay-skin="switch">
           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label">单选框</label>
           <div class="layui-input-block">
               <input type="radio" name="sex" value="男" title="男">
               <input type="radio" name="sex" value="女" title="女" checked>
           </div>
       </div>
       <div class="layui-form-item layui-form-text">
           <label class="layui-form-label">文本域</label>
           <div class="layui-input-block">
               <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
           </div>
       </div>
       <div class="layui-form-item">
           <div class="layui-input-block">
               <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
           </div>
       </div>
</form>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));//把表单中数据转成Json并输出
            return false;//true表示执行action对应的地址
        });
    });
</script>

</body>
</html>

3.6 导航.html

导航条

class="layui-nav" 水平导航条

class="layui-nav layui-nav-tree" 垂直导航条

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>
<!--<ul class="layui-nav layui-nav-tree" lay-filter="">-->
<ul class="layui-nav" lay-filter="">
       <li class="layui-nav-item"><a href="">最新活动</a></li>
       <li class="layui-nav-item layui-this"><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>
       <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

</body>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){});
</script>

</html>

四、内置模块

4.1.layer.html

弹窗 msg()、alert()、confirm()

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>
qwer
   <div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
           hello world!
       </div>
</body>

<script>
    layui.use(["layer"],function(){
        layer = layui.layer;
        layer.open({
            type:1,// 消息框，没有确定按钮
            title:["hello","padding-left:5px"], // 标题，及标题样式
            content:layui.$("#testmain"), // dom格式
            offset:'rb',//可以在右下角显示
            shade:true //是否遮罩
        });
        layer.open({
            type:2,// iframe加载，需要一个url
            content:"1.栅格布局.html"
        });
    });
</script>

<!--<script>-->
<!--    // 导入 layer模块-->
<!--    layui.use(["layer"],function(){-->
<!--        var layer = layui.layer;-->
<!--        //layer.msg("hello world!!");-->
<!--        layer.msg("确定吗？",{btn:["确定！","放弃！"],-->
<!--            yes:function(i){layer.close(i);layer.msg("yes!!!")},-->
<!--            btn2:function(i){layer.close(i);layer.msg("no!!!")}}-->
<!--        );-->
<!--    });-->
<!--</script>-->


<!--<script>-->
<!--    // 导入 layer模块-->
<!--    layui.use(["layer"],function(){-->
<!--        var layer = layui.layer;-->
<!--        //0-6 7种图标  0:warning  1:success  2:error  3:question  4:lock  5:哭脸  6：笑脸-->
<!--        layer.alert("alert弹框",-->
<!--            {title:'alert',icon:5 },-->
<!--            function(){//点击“确定”按钮时的回调-->
<!--                layer.msg("好滴");-->
<!--            }-->
<!--        );-->
<!--    });-->
<!--</script>-->

<!--<script>-->
<!--    // 导入 layer模块-->
<!--    layui.use(["layer"],function(){-->
<!--        var layer = layui.layer;-->
<!--        layer.confirm("hello world~",-->
<!--            {shade:false,icon:1,btn:["好滴","不行"]},-->
<!--            function(){layer.msg("好滴！");},-->
<!--            function(){layer.msg("不行！")}-->
<!--        );-->
<!--    });-->
<!--</script>-->


</html>

4.2.layDate.html

日期框

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<form class="layui-form layui-form-pane" action="" method="post">
       <!-- layui-form-item 一个输入项-->
       <div class="layui-form-item">
           <label class="layui-form-label">生日</label>
           <!-- layui-input-block 输入框会占满除文字外的整行 -->
           <div class="layui-input-block">
               <input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
           </div>
       </div>
</form>

</body>

<script>
    layui.use(["laydate","form"],function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#birth', //指定元素
            format:'yyyy/MM/dd',
            //value:'2012-12-12' //默认值
            value:new Date() //默认值
        });
    });
</script>

</html>

4.3.数据表格.html

4.3.1 动态表格

动态表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'music/findByPage' //数据接口
            ,page: true
            ,cols: [[ //表头
                {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'musicName', title: '歌曲名', width:100}
                ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
            ]]
        });

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

data.json数据格式如下：

code：0 代表查询成功，为1时，会显示msg中的内容

count：是为分页准备的，共有多少条数据

msg：消息内容

data：数据

{"code":0,"msg":"","count":1000,"data":

[{"musicId":1,"musicName":"光年之外","musicAlbumName":"光年之外","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20161229/20161229233400375274.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231001/f8ce61782b9164c18fb5f351e63893b9/KGTX/CLTX001/f87095bff0de7c636c3a3b8aac702d76.mp3","musicArtistName":"G.E.M.邓紫棋","sheetId":1},{"musicId":2,"musicName":"夜空中最亮的星","musicAlbumName":"世界","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20150719/20150719010047203836.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231000/1bbc218df11c188d157670bb9394bbdc/G202/M04/1B/13/aocBAF55G0-ADd0HAD2Y88Efqbw072.mp3","musicArtistName":"逃跑计划","sheetId":1},{"musicId":3,"musicName":"只要平凡","musicAlbumName":"只要平凡","musicAlbumPicurl":"https://y.qq.com/music/photo_new/T002R300x300M000000K7srf1rZtOX.jpg?max_age=2592000","musicMp3url":"https://webfs.tx.kugou.com/202110230959/454d79bdb51b3853bdbef16cdeabad0f/KGTX/CLTX001/38aead7ed546b0736791ebb25c3a3951.mp3","musicArtistName":"张杰/张碧晨","sheetId":2},{"musicId":4,"musicName":"你要跳舞吗","musicAlbumName":"生命因你而火热","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20160407/20160407002744966139.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110230959/4a0cf46bfc3a8c564ee035dc28062d14/KGTX/CLTX001/58ffa0221ed9397e7ad9b889cdbe1a4a.mp3","musicArtistName":"新裤子乐队","sheetId":2},{"musicId":5,"musicName":"Timber","musicAlbumName":"Timber","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20190517/20190517155803444871.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231008/84aa125fef71bba4becb6d4a23f14f9b/G192/M07/03/01/YIcBAF5ajbWAD3zrADH2ScRvxNQ240.mp3","musicArtistName":"pitbull","sheetId":1}]

4.3.2 分页参数

分页条细节定制在page后面加参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'music/findByPage' //数据接口
            ,page: {limit:2//每页显示1条（ 向后台传值，每页显示条数 ）
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<i class="layui-icon layui-icon-prev"></i>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            }
            ,cols: [[ //表头
                {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'musicName', title: '歌曲名', width:100}
                ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
            ]]
        });

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

4.3.3 显示工具栏

右上角工具按钮 toolbar:true

<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            toolbar:true,//显示工具栏
            url:'${pageContext.request.contextPath}/data,
            cols:[[...]],
            page:{...},
       });
    });
</script>

4.3.4 操作按钮

为每行增加操作按钮

<script>
    layui.use(["table","laytpl"],function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            url:'${pageContext.request.contextPath}/data,
            cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名', width:80}
                ,{field: 'sex', title: '性别', width:80, sort: true}
                ,{field: 'city', title: '城市'}
                ,{field: 'score', title: '评分', width: 80, sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}//添加操作按钮
            ]],
            ...
        });
    });
</script>
<!-- 如下script可以定义操作按钮在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

4.3.5 操作按钮回调

按钮的单击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'music/findByPage' //数据接口
            ,page: {limit:2//每页显示1条（ 向后台传值，每页显示条数 ）
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<i class="layui-icon layui-icon-prev"></i>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            }
            ,cols: [[ //表头
                {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'musicName', title: '歌曲名', width:100}
                ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
                ,{field: '',title:'操作',width:180,toolbar: '#barDemo'}
            ]]
            ,toolbar:true
        });

    });

</script>
<script type="text/html" id="barDemo">
       <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use("table",function(){
        table = layui.table;
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                obj.update({
                    musicName: '孤独患者'});
            }
        });
    });
</script>
</body>
</html>

这里的删除是假的删除（页面上删除了但是数据库没有删除，可以在其中添加ajax进行删除）

点击编辑，歌名变化（这里我是写死了，当然可以从编辑表中获取数据添上）

4.4.upload.html

文件上传，layui默认上传MultipartFile的文件名为：file

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<form class="layui-form layui-form-pane" action="" method="post" enctype="multipart/form-data">
       <!-- layui-form-item 一个输入项-->
       <div class="layui-form-item">
           <label class="layui-form-label">username</label>
           <!-- layui-input-block 输入框会占满除文字外的整行 -->
           <div class="layui-input-block">
               <input id="birth" type="text" name="username" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <div class="layui-input-block">
               <button type="button" class="layui-btn" id="test1">
                   <i class="layui-icon">&#xe67c;</i>上传图片
               </button>
           </div>
       </div>
</form>

</body>

<script>
    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/user/upload' //上传接口
            ,accept:'file' // file代表所有文件，默认是images代表图片
            ,size:100 // 文件最大不能超过100kb
            ,done: function(res){
                //上传完毕回调
                layui.layer.msg("ok");
            }
            ,error: function(){
                //请求异常回调
                layui.layer.msg("error");
            }
        });
    });
</script>

</html>

4.5.carousel.html

轮播图

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css">
</head>

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

<body>

<div class="layui-carousel" id="test1">
       <div carousel-item style="text-align: center;line-height: 280px">
           <div><img src="img/1.jpg" width="400" height="400"></div>
           <div><img src="img/2.jpg" width="400" height="400"></div>
           <div>条目3</div>
           <div>条目4</div>
           <div>条目5</div>
       </div>
</div>

</body>

<script>
    layui.use(['carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });
    });
</script>

</html>

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/