day58_LayUI-Toy模板网

这篇具有很好参考价值的文章主要介绍了day58_LayUI。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Layui

一、介绍

layui（谐音：类 UI) 是一套开源的Web UI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。

2021年9月，layui 官网发布公告称，layui 官网 2021 年 10 月 13 日进行下线，届时，包括新版下载、文档和示例在内的所有框架日常维护工作，将全部迁移到 Github 和 Gitee。

虽然没有官网,但是"网友"都自己又重新部署了一些网站,内容是layui一模一样

Layui - 经典开源模块化前端 UI 框架 (winxapp.cn)

Layui - 经典开源模块化前端 UI 组件库 (layuion.com)

通过官网得知,layui框架的主要内容是[页面元素],[内置模块]两部分

页面元素: 理解为一些静态html+css样式组件,(拿走即用)

内置模块

layui 定义了一套更轻量的模块规范

将一些特殊功能,比如一些动态效果,封装成了一个一个的函数,一个功能就是一个模块,每个模块有对应的名字

用的时候需要加载这些函数或者说模块,然后再使用对应的功能

二、环境搭建

2.1 下载

Layui - 经典开源模块化前端 UI 组件库

ps: 镜像网站镜像站@Layui 栅格系统与后台框架布局 (mnorg.cn)

主网站访问太慢了…

2.2 解压

将上一步下载的压缩包,解压得到如下结构文件
|-layui
|---css        
|------modules
|------layui.css // 核心样式文件
|---font       
|---layui.js      // 核心js库

2.3 项目搭建

开发前端页面,工具可以使用HBuilder,VSCode,IDEA.

为了配合后面写项目,今天就使用IDEA来开发

2.3.1 创建javaweb项目

创建maven-web项目
暂时不用导入依赖(因为不写java代码)
配置tomcat,部署项目

2.3.2 导入layui资源

静态资源(html/css/js/各种图片)放在项目webapp下

day58_LayUI

2.3.3 页面中引入layui

只需要在页面中引入

layui.css

layui.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入layui.css核心样式 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!-- 在此处写主要内容 -->


<!-- 引入layui.js核心 -->
<script src="/layui/layui.js"></script>
</body>
</html>

三、入门使用

演示: 使用模块弹出层,使用页面样式button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入layui.css核心样式 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!-- 在此处写主要内容 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="" class="layui-btn">一个可跳转的按钮</a>

<!-- 引入layui.js核心 -->
<script src="/layui/layui.js"></script>
<!-- layui模块 -->
<script>
    layui.use(['layer'], function(){
        var layer = layui.layer;

        layer.msg('Hello World - layui');
    });
</script>
</body>
</html>

四、页面元素

页面元素: 理解为一些静态html+css样式组件(拿走即用)

4.1 布局

layui有栅格系统,采用业界比较常见的12等分规则

布局容器

class=“layui-container” 水平居中,两边有留白

class=“layui-fluid” 铺满全屏

栅格系统要配合容器使用,先定义容器,容器中定义行,行内定义列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <!-- 引入layui.css核心样式 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 在此处写主要内容 -->
<!-- 1先写容器(layui-container : 水平居中) -->
<div class="layui-container" style="background-color: red;height: 300px">

    <!--2 容器内写行
        行 layui-row
    -->
    <div class="layui-row" style="background-color: #00f7de;height: 200px;">
        <!--3 行内写列
            layui-col-md*
            总共12列
        -->
        <div class="layui-col-md9" style="background-color: #01aaed">
            9/12
        </div>
        <div class="layui-col-md3" style="background-color: #009688">
            3/12
        </div>
    </div>

</div>

<hr>

<!-- 1先写容器
    layui-fluid : 铺满全屏
 -->
<div class="layui-fluid" style="background-color: red;height: 300px">

    <!--2 容器内写行-->
    <div class="layui-row" style="background-color: #00f7de;height: 200px;">
        <!--3 行内写列-->
        <div class="layui-col-md9" style="background-color: #01aaed">
            9/12
        </div>
        <div class="layui-col-md3" style="background-color: #009688">
            3/12
        </div>
    </div>

</div>
<hr>
<div class="layui-container" style="height: 300px">

    <!--2 容器内写行
        layui-col-space10 单元格间距
    -->
    <div class="layui-row layui-col-space10" style="height: 150px;">
        <!--3 行内写列-->
<!--        <div class="layui-col-md4" style="background-color: #01aaed;height: 150px;">-->
<!--            1/3-->
<!--        </div>-->

        <!-- 偏移量layui-col-md-offset4 -->
        <div class="layui-col-md4 layui-col-md-offset4" style="background-color: #009688;height: 150px;">
            1/3
        </div>
<!--        <div class="layui-col-md4" style="background-color: #01aaed;height: 150px;">-->
<!--            1/3-->
<!--        </div>-->
    </div>

    <!--2 容器内写行-->
    <div class="layui-row" style="background-color: #00f7de;height: 150px;">
        <!--3 行内写列-->
        <div class="layui-col-md8" style="background-color: #01aaed;height: 150px;">
            2/3
        </div>
        <div class="layui-col-md4" style="background-color: #009688;height: 150px;">
            1/3
        </div>
    </div>

</div>

<!-- 引入layui.js核心 -->
<script src="/layui/layui.js"></script>
</body>
</html>

4.2 导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。

千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用

通过对导航追加CSS背景类，让导航呈现不同的主题色
//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
…
</ul>
layui-bg-cyan*（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<ul class="layui-nav layui-bg-green layui-nav-tree layui-nav-side" 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>
<script src="/layui/layui.js"></script>
<script>

    // 【一定注意：加载element模块】
    layui.use('element',function (){
        var element = layui.element;
    })
</script>
</body>
</html>

练习:管理系统界面布局

管理界面大布局示例 - Layui (mnorg.cn)

<div class="layui-body">
      <iframe name="my-iframe" src="./view/admin.html" width="100%" height="100%"></iframe>
</div>

4.3 图标

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class，即可显示出你想要的图标，譬如：

<div style="border: #01aaed 2px solid;height: 300px;width: 300px">

    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #FF5722;"></i>
        <br>
    <i class="layui-icon layui-icon-heart-fill" style="font-size: 60px; color: #009688;"></i>
</div>

4.4 按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。

 <button class="layui-btn">按钮</button>
    <a class="layui-btn">a标签,链接</a>
    <i class="layui-btn">i标签</i>
    <button class="layui-btn layui-btn-primary">按钮-原始</button>
    <button class="layui-btn layui-btn-normal">按钮-normal</button>
    <button class="layui-btn layui-btn-warm">按钮-warm</button>
    <button class="layui-btn layui-btn-danger">按钮-danger</button>
    <button class="layui-btn layui-btn-disabled">按钮-layui-btn-disabled</button>

4.5 表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div class="layui-container">

    <div class="layui-row">

        <div class="layui-col-md6 layui-col-md-offset3">

            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" 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="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>
        </div>

    </div>

</div>
<!-- 加载layui核心js文件 -->
<script src="/layui/layui.js"></script>
<script>
    // 加载form模块,渲染出select、checkbox、radio等效果
    layui.use('form',function (){
        // 取出form对象
        var form = layui.form;
    })
</script>
</body>
</html>

4.6 表格

现在使用的是table的样式,是静态效果,要想有动态效果,比如加载数据,表格排序需要使用table模块

代码: 看文档

五、内置模块

内置模块

layui 定义了一套更轻量的模块规范

将一些特殊功能,比如一些动态效果,封装成了一个一个的函数,一个功能就是一个模块,每个模块有对应的名字

用的时候需要加载这些函数或者说模块,然后再使用对应的功能

使用模块的语法

要先加载模块,layui 通过 use 方法加载模块
再获得对应的模块对象
在use方法的回调中完成业务

<script src="/layui/layui.js"></script>
<script>
    // 1 加载模块,可以一次加载多个模块,此时使用数组
    layui.use(['form','layer','table'],function(){
       // 2获得对应的模块对象
       var form = layui.form;
       var layer = layui.layer;
       var table = layui.table;
    
       // 3 完成一些业务
       form.on('submit(formDemo)',function(){
           return false;
       })
     
       layer.msg();
       layer.confirm();
       layer.alert();
    
       table.render()
    });
</script>

5.1 弹出层

弹出层,模块名layer

弹出层方法

layer.open(options)

layer.msg(content,options,end)

layer.alert(content,options,end)

layer.confirm(content,options,yes,end)

layer.confirm

<script src="/layui/layui.js"></script>
<script>
  // 1 加载模块
  layui.use('layer',function (){
    // 2 获得对象
    var layer = layui.layer;

    // 3 使用
    // layer.msg("这是layer弹出")
      layer.confirm("是否删除?",{
          area: ['500px', '300px'],
          title:"删除???",
          skin:"layui-layer-molv",
          shade: [0.5, '#393D49'],
          shadeClose:false
      },function (index){
          console.log("确定删除")
          // 将来发ajax请求,后台删除数据
          layer.close(index);
      },function (index){
          console.log("取消删除")
          layer.close(index);
      });

  })
</script>

layer.open(options)

      layer.open({
          type:0, // 0 默认框
          content:"这是一个open弹框",
          title:"open",
          area:['500px', '300px'],
          yes:function (index){
              console.log("确定...")
              layer.close(index) // 关闭弹出层
          },
          cancel:function (index){
              console.log("取消...")
              layer.close(index)
          }
      })

layer.open(options) 弹出一个页面,例如添加页面

      layer.open({
          type:2, // 2 iframe框架层
          content:"http://localhost:8080/02bd.html", // 框架内显示的页面
          area:['500px','600px']
      })

5.2 日期

模块名: laydate

写一个input输入框,设置一个id
加载模块,获得对象laydate
使用laydate对象,渲染日期框效果

<body>

<input id="test">

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

    layui.use('laydate',function (){
        var laydate = layui.laydate;

        laydate.render({
            elem:"#test",  //  绑定元素
            type:"datetime", // 选择的日期类型
            range:false,     // 是否开启范围选择
            format:"yyyy年MM月dd日"  // 日期格式
        })

    })

</script>
</body>

5.3 表格

模块加载名称：table

用于在表格中对数据进行一系列动态化的操作

使用步骤

写一个空table标签,设置id
加载table模块,获得table对象
开始渲染

5.3.1 入门演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-md-offset3">
            <table id="test"></table>
        </div>
    </div>
</div>


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

    layui.use("table",function (){
        var table = layui.table;
        table.render({
            elem:"#test",
            height:312,
            url:"https://www.fastmock.site/mock/4aa2a624e009051fe726c20c2419c09b/layuidata/api/users",
            page:true,
            cols:[[
                {field:"id",title:"编号",width:90,sort:true},
                {field:"username",title:"用户名"},
                {field:"sex",title:"性别"},
                {field:"sign",title:"签名"},
                {field:"experience",title:"经验"}
            ]]
        })
    })
    /**
     * 【非常重要】【非常重要】【非常重要】
     * 1 table渲染数据的前提,后台返回的数据格式一定是json
     * 2 且json格式必须是
     *  {
          "code": 0,
          "msg": "",
          "count": 1000,
          "data": [{}, {}]
        }
       ,如果不是,那么就需要通过parseData来转换
       3 code必须是0时,认为是成功,才会渲染出效果
     */

</script>
</body>
</html>

5.3.2 后台controller接口

ps: 后台接口,指的是前后端交互对接的口子,接口.也就是指后端控制层代码.

需求: 前端使用layui.table模块,加载后台数据并在前端展现.

后台代码编写,就是三层架构(controller+service+dao),返回一个json数据

三层架构的代码不再粘贴

public class ResultData {

    private int code;
    private String msg;
    private Object data;
	private int count;
    public static ResultData fail(){
        ResultData resultData = new ResultData( );
        resultData.setCode(500);
        resultData.setMsg("失败");
        return resultData;
    }

    public static ResultData ok(){
        ResultData resultData = new ResultData( );
        resultData.setCode(200);
        resultData.setMsg("成功");
        return resultData;
    }

    public static ResultData ok(Object data){
        ResultData resultData = new ResultData( );
        resultData.setCode(200);
        resultData.setMsg("成功");
        resultData.setData(data);
        return resultData;
    }

    // setter getter...
}

5.3.3 转换返回的数据格式

table 组件默认规定的数据格式为：

{
  "code": 0,  // 返回0才是成功
  "msg": "",
  "count": 1000,  // 数据条数,分页中使用
  "data": [{}, {}]
}

接口返回的数据格式并不一定都符合 table 默认规定的格式，假如我们的返回值是如下的

{
	"code": 200, // 后台java返回200是成功
	"msg":"",
	"data": [{},{}]
}

那么需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.code == 200 ? 0 : -1, //解析接口状态
      "msg": res.msg, //解析提示文本
      "count": res.data.length, //解析数据长度
      "data": res.data //解析数据列表
    };
  }
  //,…… //其他参数
});

5.3.4 数据模板

table内表头,有一个参数templet,可以将后台返回的数据再转换成指定的数据返回给table

templet 函数，有一个参数==d==（包含当前行数据及特定的额外字段）。如下所示：

table.render({
            elem:"#test",
            height:312,
            url:"http://localhost:8080/user/list.do.do",
            page:true,
            cols:[[
                {field:"id",title:"编号",width:90,sort:true},
                {field:"username",title:"用户名",align:"center"},
                {field:"password",title:"密码"},
                {field:"phone",title:"手机号"},
                {field:"createTime",title:"注册时间",templet:function (d){
                   // console.log("d ==>" ,d);
                   let now = new Date(d.createTime);
                   let year = now.getFullYear();
                   let month = now.getMonth() +1;
                   let day = now.getDate();
                   return year+"年"+month+"月"+day+"日";
                }},
                {field:"money",title:"余额",sort: true},
                {field:"sex",title:"性别",templet:function (d){
                    return d.sex == 1 ? '男':'女';
                }}
            ]],

5.3.5 分页数据

table.render中设置 page:true,开启分页

page参数还可以设置为laypage模块中的参数分页组件文档 - Layui (layuion.com)

        table.render({
            elem:"#test",
            height:312,
            url:"http://localhost:8080/user/list.do",
            // page:true,
            page:{
                count: 2000,
                limit: 2,
                limits:[2,4,6,8,10],
                first:"首页",
                last:"尾页"
            }
        }

table.render在渲染数据时,发送请求时会自动拼接出分页参数?page=1&limit=10 意思是指,从第一页展现,每页展现10条,参数名默认是page和limit,也可以通过request参数修改参数名

后台接收分页数据,并根据分页信息查询,返回数据

@RequestMapping("/list")
@ResponseBody
// 使用map接收前端发送的各种数据
public ResultData list(@RequestParam HashMap<String, String> map) {
    System.out.println(map);
    // 分页请求参数默认是page,limit
    int page = Integer.parseInt(map.get("page"));
    int limit = Integer.parseInt(map.get("limit"));
    // mybatis分页插件,设置分页数据
    PageHelper.startPage( page, limit );
    // 查询全部
    List<House> list = houseService.findAll( );
    // 获得所有分页数据
    PageInfo<House> info = new PageInfo<>(list);
    long count = info.getTotal( );
	// 要给返回的数据设置总条数,否则layui无法展现数据
    return ResultData.ok(list,(int)count);
}

5.3.6 自定义列模板-了解

自定义列模板-文档

默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果想对某列的单元格添加链接,格式化日期等其它元素，可以使用自定义模板。

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

如果自定义模版的字符量太大，我们推荐你采用【方式一】；

如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；

如果自定义模板的字符量很小，我们推荐你采用【方式三】

方案一: 引用templet模板

<script type="text/html" id="titleTpl">
 
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
<!-- 注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。 -->
<script>
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});
</script>

方案二: 函数转义

table.render({
  cols: [[
        {
            title:"操作",templet:function (d){
            let str = "<a class=\"layui-btn layui-btn-xs layui-btn-warm\">编辑</a>";
            str += " <a class=\"layui-btn layui-btn-xs layui-btn-danger\">删除</a>";
            return str;
            }
        }
      ,{field:'id', title:'ID', width:100}
      ]]
})

**方案三:**直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：

       
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

5.3.7 操作按钮列-推荐

day58_LayUI

通常你需要在表格的每一行加上查看、编辑、删除这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。

1)设置按钮脚本

2)使用toolbar引用脚本

<!-- 按钮脚本 
注意,id可以使用短横线,btn-script
注意：属性 lay-event=" " 是模板的关键所在，值可随意定义。
-->
<script type="text/html" id="btnScript">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">

    layui.use("table",function (){
        var table = layui.table;
        table.render({
            elem:"#test",
            height:312,
            url:"http://localhost:8080/user/list.do.do",
            cols:[[
                // ....
                {   //这里的toolbar值#btnScript是模板元素的选择器
                    title:"操作",toolbar:"#btnScript"
                }
            ]],
        })
    })
 </script>

5.3.8 操作【行】按钮事件

layui有自己的事件处理方式
给table标签设置过滤器 lay-filter=“随意名”
<table class="layui-table" lay-filter="test"></table> 
设置事件源

在按钮标签中设置 lay-event=“自己随便写的事件名”

绑定事件

table.on(‘事件(filter)’)

table.on(‘tool(test)’, function(obj){}

<table id="test" lay-filter="myTableFilter"></table>
<script type="text/javascript">
    layui.use(["table","layer","jquery"],function (){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        table.render({
            elem:"#test",
            height:312,
            url:"http://localhost:8080/user/list.do.do",
            page:true,
            cols:[[
                {field:"id",title:"编号",width:90,sort:true},
                // ....
                {
                    title:"操作",toolbar:"#btnScript"
                    }
                }
            ]]
        //注：tool 是工具条事件名，myTableFilter 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(myTableFilter)',function (obj){
            // console.log("obj ==>" , obj) 
            // obj 是事件触发的对象,内含当前行数据以及自定义事件名
            // var data = obj.data; //获得当前行数据
            // var layEvent = obj.event; 
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            
            if (obj.event == 'edit') {
                // 发送ajax请求
                // $.ajax()
                layer.msg("更新");
            } else if (obj.event == "delete") {
                layer.confirm("删除?",function (index){
                    console.log("确定删除!")
                    layer.close(index);
                },function (index){
                    console.log("取消删除!")
                    layer.close(index);
                });
            }
        })
    })
</script>

需要注意的!!!

table.on(‘tool(myTableFilter)’

tool是固定的事件名,不能乱改

myTableFilter是table标签中filter的名字

需要使用ajax发送请求的话,

1)项目中需要加入jquery.js文件

2)文件中需要使用script引用jquery文件

3)layui加载jquery模块

4)获得jquery对象就可以操作了

5.3.9 操作【表格】按钮

是指在表格上方出现一些按钮,比如说添加

用法:

设置html脚本

<!-- 表头按钮脚本 -->
<script type="text/html" id="tableBtnScript">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="add">添加</a>
</script>

table.render({}) 内渲染时指定脚本id 即可出现按钮效果

    // 表格渲染
    table.render({
      elem:'#myTableId',
      toolbar:'#tableBtnScript', // 引用脚本id
      url:'/house/list.do',
        //....
    })

day58_LayUI

绑定事件

table.on('toolbar(myTableFilter)', function(obj){
  	// ....
  };
});

5.4 表单

layui form 是一个包含众多表单组件的综合性模块，使用频率极高。主要对表单元素进行各类动态化渲染和相关操作。

模块加载名称：form

5.4.1 渲染

直接复制表单样式,效果不完整,还需要通过加载form模块来渲染出完整效果

// 示例
var form = layui.form;
 
// 一般当表单存在动态生成时，进行渲染
form.render(); // 渲染全部

5.4.1 事件

form.on(‘event(filter)’, callback);

event	描述
select	触发select下拉选择事件
checkbox	触发checkbox复选框勾选事件
switch	触发checkbox复选框开关事件
radio	触发radio单选框事件
`submit`	`触发表单提交事件`

默认情况下，事件所触发的是全部的 form 模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：<select lay-filter="test"></select>

form.on('select(test)', function(data){
  console.log(data);
});

演示1:select事件

 <select name="city"  lay-filter="city">
     <option value=""></option>
     <option value="0">北京</option>
     <option value="1">上海</option>
     <option value="2">广州</option>
     <option value="3">深圳</option>
     <option value="4">杭州</option>
</select>
<script>

    layui.use(["form"], function () {
        let form = layui.form;

        // 绑定select事件
        form.on("select(city)",function (obj){
            console.log("event-obj ==> ",obj)
            // 获得标签的数据
            console.log(obj.value)
        })
    })
</script>

演示2: checkbox事件

<div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
        <input type="checkbox" lay-filter="hobby" name="like" title="写作" value="write">
        <input type="checkbox" lay-filter="hobby" name="like" title="阅读" value="read">
        <input type="checkbox" lay-filter="hobby" name="like" title="编程" value="code">
    </div>
</div>
<script>

    layui.use(["form"], function () {
        let form = layui.form;
        // 绑定checkbox事件
        form.on("checkbox(hobby)",function (obj){
            console.log(obj.value);
            console.log(obj.elem.checked);//选中是true
        })
    })
</script>

演示3: 表单提交submit事件【重要】

<div class="layui-form-item">
    <div class="layui-input-block">
		<input type="text" name="username" class="layui-input">
    </div>
     <div class="layui-input-block">
		<input type="text" name="password" class="layui-input">
    </div>
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
</div>
<script>

    layui.use(["form"], function () {
        let form = layui.form;
        form.on("submit(formDemo)",function (obj){
            console.log(obj.field);// 获得表单字段,{name:value}

            // 后续,发送ajax处理
            // $.ajax({url:"",data:obj.field})

            // 阻止默认的form行为
            return false;
        })
    })
</script>

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入

5.4.2 表单验证

Layui对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 lay-verify="" 属性值即可。如：
<input type="text" lay-verify="email"> 

内置的校验规则如下

规则名	备注
required	必填项
phone	手机号
email	邮箱
url	网站
number	数字
date	日期
identity	身份证

还可以自定义校验,如下

表单校验

使用form.verify({规则对象})

规则对象

规则名:function(value,dom){}

当你自定义了类似上面的验证规则后，你只需要把 key (规则名)赋值给输入框的 lay-verify 属性即可

当表单提交时，自动触发验证文章来源地址https://www.toymoban.com/news/detail-500605.html

// 定义规则
form.verify({
    username: function (value, item) { //value：表单的值、item：表单的DOM对象
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
            return '用户名不能有特殊字符';
        }
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]{6,10}$").test(value)) {
            return '长度6-10';
        }
        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
            return '用户名首尾不能出现下划线\'_\'';
        }
        if (/^\d+\d+\d$/.test(value)) {
            // return '用户名不能全为数字';
            layer.msg("用户名不能全为数字!!!!")
            return true;
        }
        // //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
        // if (value === 'xxx') {
        //     alert('用户名不能为敏感词');
        //     return true;
        // }
    }
})

<div class="layui-input-block">
    <input type="text" name="title" lay-verify="username" class="layui-input">
</div>

到了这里，关于day58_LayUI的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

day58_LayUI

Layui

一、介绍

二、环境搭建

2.1 下载

2.2 解压

2.3 项目搭建

2.3.1 创建javaweb项目

2.3.2 导入layui资源

2.3.3 页面中引入layui

三、入门使用

四、页面元素

4.1 布局

4.2 导航

练习:管理系统界面布局

4.3 图标

4.4 按钮

4.5 表单

4.6 表格

五、内置模块

5.1 弹出层

5.2 日期

5.3 表格

5.3.1 入门演示

5.3.2 后台controller接口

5.3.3 转换返回的数据格式

5.3.4 数据模板

5.3.5 分页数据

5.3.6 自定义列模板-了解

5.3.7 操作按钮列-推荐

5.3.8 操作【行】按钮事件

5.3.9 操作【表格】按钮

5.4 表单

5.4.1 渲染

5.4.1 事件

5.4.2 表单验证

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2