LayUI笔记

独自空忆成欢 提交于 2019-11-28 16:29:09

LayUI

 经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.

  其他UI框架:
    Bootstrap,Element, EasyUI,LayUI 等等

LayUI使用

 Layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

  1. 官网首页下载 https://www.layui.com/

  2. 引入layui核心文件:

layui/css/layui.css // layui中内置的样式
layui/layui.js      // layui中核心的js插件(模块化使用)
layui/layui.all.js  // layui中所有的js

  3. layui的目录介绍:

   layui
    ├─css //css目录
    │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
    │ │ ├─laydate
    │ │ ├─layer
    │ │ └─layim
    │ ├─layui.css //核心样式文件
    │ └─layui.mobile.css //移动端CCSS样式
    ├─font //字体图标目录(内置字体)
    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
    │─lay //模块核心目录
    │ └─modules //各模块组件(所有模块的JS)
    │─layui.js //基础核心库(所有JS的入口)
    └─layui.all.js //包含layui.js和所有模块的合并文件(layui中所有的js)

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 
 1. 在JS引入时  若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
 2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题
-->
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
 // 初始化layui模块
 layui.use(['form','jquery'],function(){
     // 初始化模块的对象
     // 初始化jquery对象
     var $ = layui.jquery;
     // 初始化form表单模块对象
     var form = layui.form;
 });
</script>
</body>
</html>

页面元素

布局

栅格系统:

 容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.

一.栅格布局规则

  1. 采用 layui-row 来定义行,如:<div class="layui-row"></div>
  2. 采用类似 layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内。其中:变量md 代表的是不同屏幕下的标记(可选值见下文)变量代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
  3. 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
  4. 可对列追加类似 layui-col-space5layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
  5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

颜色

样式 颜色
class="layui-bg-red" 赤色,比较引人注意的颜色
class="layui-bg-orange" 橙色,暖色系,一般用于提示性元素
class="layui-bg-green" 墨绿,通常用于按钮、及任何修饰元素
class="layui-bg-cyan" 藏青:侧边或底部普遍采用的颜色
class="layui-bg-blue" 蓝色:比较适合一些鲜艳色系的页面
class="layui-bg-black" 雅黑:通常用于导航
class="layui-bg-gray" 银灰:背景、边框

字体图标

​ 通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标.然后对元素加上图标对应的字体图标.

layui-icon : 表示是一个字体图标

layui-icon-XXXX:具体的内置图标

字体图标在LayUI中有两种表现方式:

​ 1.使用class样式

​ 2.使用图标字符集

例如:

<p>字体图标</p>
<!-- 使用class样式 -->
<i  class="layui-icon layui-icon-rate"></i>
<!-- 使用特殊的字体字符集 -->
<i  class="layui-icon">&#xe67b;</i>

动画

​ 内置动画,使用: class="layui-anim" 表示是动画,动画Layui内置8种,后面跟具体的动画效果

动画样式 动画效果
class="layui-anim layui-anim-up" 从最底部往上滑入
class="layui-anim layui-anim-upbit" 微微向上划入
class="layui-anim layui-anim-scale" 平滑放大
class="layui-anim layui-anim-scaleSpring" 弹簧式放大
class="layui-anim layui-anim-fadein" layui-anim-fadein
class="layui-anim layui-anim-fadeout" 渐隐
class="layui-anim layui-anim-rotate" 360旋转
class="layui-anim layui-anim-loop" 循环动画

按钮(重点)

​ 使用class = "layui-btn" 表示按钮样式

颜色:

名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"

尺寸:

尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"

形状:

是否圆角:class=" layui-btn-radius" :表示圆角

例如:

主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

图标按钮:即将button和i标签使用字体图标结合

<button class="layui-btn  layui-btn-lg layui-btn-danger">
    <i class="layui-icon layui-icon-fire"></i>按钮
</button>

注意:

​ class="layui-btn-group" 按钮组,将多个按钮放在一起,可以缩小默认的按钮之间的间隙

导航

​ layui默认导航是水平导航,使用: class="layui-nav".

​ class="layui-nav-item" : 表示导航中的项

水平导航

class="layui-nav" 表示导航 水平导航

​ |--- class="layui-nav-item" 表示导航中的具体项

​ |--- class="layui-nav-child" 表示导航项中的子项

​ |--- class="layui-this" 表示当前被选中的项

垂直导航

class="layui-nav layui-nav-tree" : 表示是导航中垂直导航

​ |--- class="layui-nav-itemed" : 被展开的导航项

​ |--- class="layui-nav-side" : 会垂直占一列

Tab选项卡

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能.

在layui中,class="layui-tab"表示是一个选项卡

​ |--- class="layui-tab-title" : 表示选项卡的标题

​ |--- class="layui-this" : 表示当前被选中的项

​ |--- class="layui-tab-content" : 表示选项卡中的内容

​ |--- class="layui-tab-item" : 表示内容项

​ |--- class="layui-show" : 表示当前内容项会展示

选项卡风格:

样式 说明
layui-tab-brief 简单风格(下划线)
layui-tab-card Tab卡片风格(块)

特殊属性:

属性名 说明
lay-allowClose="true" 选项卡可以被关闭(只要该属性有值,则表示生效)
lay-id="xxx" 选项卡中用于设置选项的唯一的匹配索引
lay-filter="xxx" 选卡的唯一标识(一般用于layui中事件)

事件:

事件名 说明
element.on('tab(filter)', function(data){}); 监听选项卡切换
element.on('tabDelete(filter)', function(data){})' 监听选项卡的删除
element.tabAdd('demo', options); 新增选项卡
element.tabChange('lay-filter值', layid); 切换选项卡
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="myTab"> 
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item  ">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
 <button id="addBtn">新增一个选项卡</button>
  <button id="addBtn2">切换选项卡</button>
 <!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    //初始化layui模块
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        var $ = layui.jquery;
        //选项卡事件:
        //选项卡切换事件
        element.on('tab(myTab)',function(data){//tab(lay-filter的值)
            console.log(data);
            //当前选项信息:   整个选项卡信息以及当前信息
            console.log(data.elem);
            console.log("get(0):"+data.elem.get(0)); //jquery 对象 :  js对象转化为jquery对象   jquery 对象怎么转化为js对象
            // js对象转化为jquery 对象 : $(js对象) :  
            // 获取上一个选项
            console.log(data.elem.prevObject);
            //所在选项卡的下标索引, 从 0 开始
            console.log(data.index);
        });
        //选项卡删除事件
        element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器
        });
        //为按钮绑定点击事件
        $("#addBtn").click(function(){
            //新增选项卡
            var tab = {
                     title: '新增选项卡的标题',
                     content: '选项卡的内容', //支持传入html
                     id: '999'
            };
            element.tabAdd("myTab", tab);
        });
        //切换选项卡
        $("#addBtn2").click(function(){
            //切换选项卡 tabChange("lay-filter的值", lay-id值);
            element.tabChange("myTab", 999);
        });
    });
</script>
</body>
</html>

进度条

​ 在layui中,使用class="layui-progress"表示进度条.

​ class="layui-progress-bar" 表示具体的进度条

​ class="layui-progress-big" 表示尺度大号

属性:

属性名 说明
lay-percent="10%" 进度条进度
lay-showPercent="true" 是否显示进度值
lay-filter="XXX" 事件操作相关属性值

事件:

事件名称 说明
element.progress('lay-filter的值',value); 更新进度条进度

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<!-- 表示进度条 -->
<div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
    <div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
</div>
<button id="btn1">开始涨涨涨</button>
 <!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    //初始化layui模块
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        var $ = layui.jquery;
        
        //点击按钮后 让进度条进度增涨
        $("#btn1").click(function(){
            var m = 10;
            window.setInterval(function(){
                var v = m+"%";
                m = m+10;
                if(m > 100){
                    m = 100;
                }
                //获取进度条的值
                element.progress('myProgress', v);
            }, 1000);
        });
    });
</script>
</body>
</html>

面板

​ 在layui中,面板是指:一个独立的容器,装元素,而折叠面板则能有效地节省页面的可视面积.

普通面板:

​ class="layui-card" : 表示普通面板

​ |--- class="layui-card-header" 面板的头部信息

​ |--- class="layui-card-body" 面板内容

折叠面板:

​ class="layui-collapse" : 表示折叠面板

​ |--- class="layui-colla-item" : 折叠面板中的项

​ |--- class="layui-colla-title" : 折叠面板中的项中的标题

​ |--- class="layui-colla-content" : 折叠面板项中的内容

​ |--- class="layui-show" : 折叠面板中 展开的项

属性:
属性名 说明
lay-accordion 表示折叠面板只能展开一个面板项
事件
事件名 说明
element.on('collapse(lay-filter值)', function(data){}); 监听面板的展开或者收缩

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<h1>普通面板</h1>
<div class="layui-card">
  <div class="layui-card-header">面板标题</div>
  <div class="layui-card-body">
        面板内容
  </div>
</div>
<h1>折叠面板</h1>
<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content ">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content ">内容区域</div>
  </div>
</div>
<h1>手风琴面板---只能显示一个</h1>
<div class="layui-collapse" lay-accordion lay-filter="myPanel"> 
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
 <!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    //初始化layui模块
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        var $ = layui.jquery;
        //监听面板的展开或者收缩
        element.on('collapse(myPanel)', function(data){
            //console.log(data);
            console.log(data.show); //得到当前面板的展开状态,true或者false
            console.log(data.title); //得到当前点击面板的标题区域DOM对象
            console.log(data.content); //得到当前点击面板的内容区域DOM对象
        });
    });
</script>
</body>
</html>

时间线

在layui中,使用class="layui-timeline"表示时间线.

使用class="layui-timeline-item" 表示实现线中的项

​ |--- class="layui-timeline-content 表示时间线的内容

​ |--- class="layui-timeline-title" 表示内容的标题

​ 使用<p>标签表示具体的内容

注意: 在时间线中可以插入图标:

 <i class="layui-icon layui-timeline-axis">&#xe63f;</i>

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<ul class="layui-timeline">
  <li class="layui-timeline-item">
     <i class="layui-icon layui-timeline-axis">&#xe756;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
        <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe756;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
     <i class="layui-icon layui-timeline-axis">&#xe756;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
     <i class="layui-icon layui-timeline-axis" style="color:red">&#xe756;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>
 <!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    //初始化layui模块
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        var $ = layui.jquery;
    });
</script>
</body>
</html>

表单-form(重点)

​ 在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.

样式:

class="layui-form"表示该容器使用表单的样式.该样式,是表单中具体样式的基础.

​ |--- class="layui-form-item" : 表示表单中的具体项

​ |--- class="layui-form-label" : 表示表单项中label标签,文本说明

​ |--- class="layui-input-block" : 表示一个input容器,block块元素 占一行

​ |--- class="layui-input-inline" : 表示一个input容器,inline 行内块.不占一行

​ |--- class="layui-input" : 表示一个input标签

​ |--- class="layui-inline" : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹

特殊样式:

​ 在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.

复选框:

属性名 说明
title 显示的文字
lay-skin 风格:默认 primary 原始复选框效果 switch: 开关形式
checked 选中
value 复选框值
lay-text="文本1|文本2" 开关效果显示的文字

单选按钮:

属性名 说明
title 显示的文字
checked 选中
value 复选框值

下拉框:

属性名 说明
selected 选中
lay-search 开启搜索效果

form表单特殊属性:

属性名 属性值 说明
title 任意字符 设定元素名称,一般用于checkbox、radio框
lay-skin switch(开关风格) primary(原始风格) 定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式
lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格
lay-filter 任意字符 事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。
lay-verify email(邮箱)url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verType tips(吸附层) alert(对话框) msg(默认) 用于定义异常提示层模式。
lay-reqText 任意字符 用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本 注意:该功能为 layui 2.5.0 新增
lay-submit 无需填写值 绑定触发提交的元素,如button

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">显示文字</label>
            <!-- input 容器 这种是独占一行 -->
            <div class="layui-input-block">
                <input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg"  lay-reqText="独占一行不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">显示文字1</label>
                <!-- input 容器 这种是独占一行 -->
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="number|username"  lay-verType="tips"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">显示文字</label>
                <!-- input 容器 这种是独占一行 -->
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="显示的文字" />
                </div>
            </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="写作" lay-skin="primary">
                <!-- 开关风格 -->
                <input type="checkbox" name="like[read]" lay-text="文本1|文本2" lay-skin="switch" 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="radio" name="sex" value="nan" title="男">
                <input type="radio" name="sex" value="nv" title="女" checked>
                <input type="radio" name="sex" value="" title="中性" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉框:</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="" lay-search>
                    <option value="010">layer</option>
                    <option value="021">form</option>
                    <option value="0571" selected>layim</option>
                </select>  
            </div>
        </div>
        <button class="layui-btn" lay-submit >提交</button>       
    </form>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
        //初始化layui模块
        layui.use([ 'element', 'jquery', 'form' ], function() {
            var element = layui.element;
            var $ = layui.jquery;
            var from = layui.form;
            //自定义校验规则
            from.verify({
                username:function(value, item){
                    console.log(value);
                    if(value.length < 10){
                         return '用户名不能少于10位';
                    }
                }
            });
        });
    </script>
</body>
</html>
事件:
事件类型 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件
方法:
方法名称 解释
render() 重新渲染
val() 获取或者为表单赋值

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
    <form class="layui-form" action="http://www.baidu.com"  lay-filter="myForm">
        <div class="layui-form-item">
            <label class="layui-form-label">显示文字</label>
            <!-- input 容器 这种是独占一行 -->
            <div class="layui-input-block">
                <input class="layui-input"  name="input1"  value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg"  lay-reqText="独占一行不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">显示文字1</label>
                <!-- input 容器 这种是独占一行 -->
                <div class="layui-input-inline">
                    <input class="layui-input" name="input2"  value="13111111111" lay-verify="number|username"  lay-verType="tips"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">显示文字</label>
                <!-- input 容器 这种是独占一行 -->
                <div class="layui-input-inline">
                    <input class="layui-input" name="input3"  placeholder="显示的文字" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框:</label>
            <div class="layui-input-block">
                <!-- 原始风格 -->
                <input type="checkbox" lay-filter="formCheckbox"  value="写作" name="like[write]" title="写作" lay-skin="primary">
                <!-- 开关风格 -->
                <input type="checkbox" lay-filter="formCheckbox" value="文本" name="like[text]" lay-text="文本1|文本2" lay-skin="switch" checked>
                <!-- 默认风格 -->
                <input type="checkbox" lay-filter="formCheckbox" value="发呆" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选按钮:</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="formRadio" name="sex" value="男" title="男">
                <input type="radio" lay-filter="formRadio" name="sex" value="女" title="女" checked>
                <input type="radio" lay-filter="formRadio" name="sex" value="" title="中性" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉框:</label>
            <div class="layui-input-block">
                <select id="city" name="city"  lay-search   lay-filter="formSelect">
                    <option value="010">layer</option>
                    <option value="021">form</option>
                    <option value="0571" selected>layim</option>
                </select>  
            </div>
        </div>
        <button class="layui-btn"  lay-submit lay-filter="submitBtn">提交</button>        
    </form>
    <br>
    <button class="layui-btn"  id="initForm">为表单初始化值</button>
    <br>
    <button class="layui-btn" id="addDom">为下拉框新增option</button>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
        //初始化layui模块
        layui.use([ 'element', 'jquery', 'form' ], function() {
            var element = layui.element;
            var $ = layui.jquery;
            var form = layui.form;
            //自定义校验规则
            form.verify({
                username:function(value, item){
                    if(value.length < 10){
                         return '用户名不能少于10位';
                    }
                }
            });
        //==========监听下拉框选择事件===========    
        //监听下拉框选择事件
        form.on("select(formSelect)",function(data){
            console.log(data);
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });
        //==========复选框选择事件:只支持原生风格  默认风格===========
        form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
              console.log(data.elem); //得到checkbox原始DOM对象
              console.log(data.elem.checked); //是否被选中,true或者false
              console.log(data.value); //复选框value值,也可以通过data.elem.value得到
              console.log(data.othis); //得到美化后的DOM对象
        });
        //===========复选框选择事件:开关风格===========
        form.on("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启,true或者false
            console.log(data.value); //开关value值,也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
        });
        //==========单选按钮:==========
        form.on("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
             console.log(data.elem); //得到radio原始DOM对象
             console.log(data.value); //被点击的radio的value值
        });
        //========监听表单提交=========
        form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
            console.log(data);
            console.log(data.field);
            //阻止表单提交  因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
            //使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
            return false;
        });
        //==========方法: 为表单初始化值:===========
        $("#initForm").click(function(){
            var data = {
                    'input1':'12345678911',
                    'input2':'12345678911',
                    'input3':'12345678911',
                    'like[write]': true,
                    'like[text]':true,
                    'like[dai]':true,
                    'sex':'女',
                    'city':'021'
            };
            form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
            //得到form的值
            console.log(form.val("myForm"));
        });
        //===========方法: 重新渲染表单============
        $("#addDom").click(function(){
            $("#city").append("<option value='option' >新增option</option>");
            //重新渲染表单
            form.render();
        });
    });
    </script>
</body>
</html>

表格-table(重点)

​ 在layui中,使用class="layui-table"表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.

表格基础参数

参数 类型 说明 示例值
elem String/DOM 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 "#demo"
cols Array 设置表头。值是一个二维数组。方法渲染方式必填 详见表头参数
url(等) - 异步数据接口相关参数。其中 url 参数为必填项 详见异步接口
toolbar String/DOM/Boolean 开启表格头部工具栏区域,该参数支持四种类型值:toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: '
xxx
' //直接传入工具栏模板字符toolbar: true //仅开启工具栏,不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板注意: 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数
false
defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮 详见头工具栏图标
width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。 1000
height Number/String 设定容器高度 详见height
cellMinWidth Number (layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100
done Function 数据渲染完的回调。你可以借此做一些其它的操作 详见done回调
data Array 直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。 [{}, {}, {}, {}, …]
totalRow Boolean 是否开启合计行区域。layui 2.4.0 新增 false
page Boolean/Object 开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外) {theme: '#c00'}
limit Number 每页显示的条数(默认:10)。值务必对应 limits 参数的选项。 注意:优先级低于 page 参数中的 limit 参数 30
limits Array 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 [30,60,90]
loading Boolean 是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式 false
title String 定义 table 的大标题(在文件导出等地方会用到)layui 2.4.0 新增 "用户表"
text Object 自定义文本,如空数据时的异常提示等。注:layui 2.2.5 开始新增。 详见自定义文本
autoSort Boolean 默认 true,即直接由 table 组件在前端自动处理排序。 若为 false,则需自主排序,通常由服务端直接返回排序好的数据。 注意:该参数为 layui 2.4.4 新增 详见监听排序
initSort Object 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 详见初始排序
id String 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从
中的 id 参数中获取。
test
skin(等) - 设定表格各种外观、尺寸等 详见表格风格

表头参数

参数 类型 说明 示例值
field String 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,其值是JSON数据中key username
title String 设定标题名称,显示标题 用户名
width Number/String 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。 200 30%
minWidth Number 局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth 100
type String 设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列,layui 2.4.0 新增)numbers(序号列)space(空列) 任意一个可选值
LAY_CHECKED Boolean 是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true
fixed String 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 left(同 true) right
hide Boolean 是否初始隐藏列,默认:false。layui 2.4.0 新增 true
totalRow Boolean 是否开启该列的自动合计功能,默认:false。layui 2.4.0 新增 true
totalRowText String 用于显示自定义的合计文本。layui 2.4.0 新增 "合计:"
sort Boolean 是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此。 true
unresize Boolean 是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。 false
edit String 单元格编辑类型(默认不开启)目前只支持:text(输入框) text
event String 自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理 任意字符
style String 自定义单元格样式。即传入 CSS 样式 background-color: #5FB878; color: #fff;
align String 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右) center
colspan Number 单元格所占列数(默认:1)。一般用于多级表头 3
rowspan Number 单元格所占行数(默认:1)。一般用于多级表头 2
templet String 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等 详见自定义模板
toolbar String 行工具栏 详见行工具事件

异步数据接口参数

​ 数据的异步请求由以下几个参数组成:

参数名 功能
url 接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义) page 代表当前页码、limit 代表每页数据量
method 接口http请求类型,默认:get
where 接口的其它参数。如:where: {token: 'sasasas', id: 123}
contentType 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
headers 接口的请求头。如:headers: {token: 'sasasas'}
parseData 数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配.
request 用于对分页请求的参数:page、limit重新设定名称,如:
response 如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:

在layui中,渲染表格存在两种方式:

方式一:自动渲染

​ 所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。你需要关注的是以下三点:

  1. 带有 class="layui-table" 标签。
  2. 对标签设置属性 lay-data="" 用于配置一些基础参数
  3. 标签中设置属性lay-data=""用于配置表头信息

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <!-- 自动渲染 -->
        <!-- lay-data属性配置基础参数信息 -->
        <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80}">用户ID</th>
                    <th lay-data="{field:'username', width:120}">用户名称</th>
                    <th lay-data="{field:'sex', width:50}">性别</th>
                    <th lay-data="{field:'city', width:80}">城市</th>
                    <th lay-data="{field:'sign', width:80}">签名</th>
                    <th lay-data="{field:'experience', width:80}">积分</th>
                    <th lay-data="{field:'score', width:80}">评分</th>
                    <th lay-data="{field:'wealth',sort:true}">财富</th>
                    <th lay-data="{field:'classify', width:80}">职业</th>
                </tr>
            </thead>
        </table>
        <!-- 引入layui中JS -->
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['jquery', 'table' ], function() {
                var $ = layui.jquery;
                var table = layui.table;
        });
        </script>
    </body>
    </html>

    方式二:方法渲染

    ​ 方法级渲染”将基础参数的设定放在了JS代码中",页面只需要定义一个table,然后在JS中找到table进行绑定.然后将这个table进行数据渲染。

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <!-- 自动渲染 -->
        <!-- lay-data属性配置基础参数信息 -->
    <!--    <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80}">用户ID</th>
                    <th lay-data="{field:'username', width:120}">用户名称</th>
                    <th lay-data="{field:'sex', width:50}">性别</th>
                    <th lay-data="{field:'city', width:80}">城市</th>
                    <th lay-data="{field:'sign', width:80}">签名</th>
                    <th lay-data="{field:'experience', width:80}">积分</th>
                    <th lay-data="{field:'score', width:80}">评分</th>
                    <th lay-data="{field:'wealth',sort:true}">财富</th>
                    <th lay-data="{field:'classify', width:80}">职业</th>
                </tr>
            </thead>
        </table> -->
        <!-- 方法渲染 -->
        <table class="layui-table" id="myTable"></table>
        
        <script type="text/html" id="titleTpl">
            {{#  if(d.sex == '男'){ }}
                <font color='red'>GG</font>
            {{#  } else if(d.sex == '女') { }}
                <font color='green'>MM</font>
            {{#  } }}
        </script>
        <script type="text/html" id="headBtns">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </script>
        <script type="text/html" id="rowBtns">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </script>
        <!-- 引入layui中JS -->
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['jquery', 'table' ], function() {
                var $ = layui.jquery;
                var table = layui.table;
                //渲染表格 且返回该表格对象
                var t = table.render({
                    id:'myTableId', //容器对象的唯一标识
                    elem:"#myTable",// 绑定的table容器
                    url:'data/data01.json',//数据接口
                    page:true,//开启分页
                    toolbar:"#headBtns",//开启表头工具栏 默认会开启右侧默认工具栏
                    defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出   filter 筛选   print 打印    
                    width:1200, //设置table容器宽度  只支持像素
                    height:520, //设置table容器的高度  只支持像素
                    cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
                    done:function(res, curr, count){ //表格渲染完成后进行回调
                        console.log(res); // 返回的数据
                        console.log(curr);//当前页
                        console.log(count);//总数据条数
                    },
                    parseData:function(rs){//此时对数据进行解析适配  rs就是后台返回的数据
                        return {
                            "code":rs.code,
                            "msg":rs.msg,
                            "count":rs.count,
                            "data":rs.data.data
                        }
                        
                    },
                    response: {// 为响应的数据进行别名
                        //statusName: 'status' //规定数据状态的字段名称,默认:code
                        statusCode: 200 //规定成功的状态码,默认:0
                        //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
                        //,countName: 'total' //规定数据总数的字段名称,默认:count
                        //,dataName: 'rows' //规定数据列表的字段名称,默认:data
                      } ,
                     request: {//对默认请求参数进行别名
                            pageName: 'currentPage', //页码的参数名称,默认:page
                            limitName: 'pageSize' //每页数据量的参数名,默认:limit
                    },
                    where:{'name':'张三'},
                    totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
                    limit:20,//每页显示的条数
                    limits:[20,50,100],//每页条数的选择项
                    loading:true,//是否显示加载条  在table进行数据加载时,是否显示loading的效果
                    title:'用户表',//在数据导出时 用于设置文件的名称
                    text:{
                        none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
                      },
                    autoSort:false,// 是否前端进行排序
                    //skin:'nob', //边框风格
                    even:true,// 隔行背景
                    cols:[[
                        {type:'checkbox',width:80,LAY_CHECKED:true},
                        {field:'id',title:'ID', width:80},
                        {field:'username',title:'用户名', width:80},
                    /*  {field:'sex',title:'性别', width:80,templet:function(d){
                            var sex = d.sex;
                            if(sex =='男'){
                                return "<font color='red'>GG</font>";
                            }else if(sex =='女'){
                                return "<font color='green'>MM</font>";
                            }
                        }}, */
                        {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
                        {field:'city',title:'城市', width:80},
                        {field:'sign',title:'签名',edit:'text', width:80},
                        {field:'experience',title:'积分',width:80},
                        {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
                        {field:'wealth',title:'财富',totalRow:true,align:'center'},
                        {field:'classify',title:'职业', width:80,style:'color:red'},
                        {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
                    ]] //设置表头
                    
                }); 
        });
        </script>
    </body>
    </html>

    table中的方法

    方法名 说明
    reader() 渲染一个table
    table.checkStatus('ID') 获取选中的行,id为初始化的ID值
    row.del() 删除行
    row.update({username: '123' ,title: 'xxx'}); 修改行
    reload("初始化ID",option)或者初始化对象.reload(option) 重载表格

    事件监听

    事件类型 说明
    table.on('toolbar('table的lay-filter值')', function(obj){}); 监听头工具栏事件
    table.on('checkbox('table的lay-filter值')', function(obj){}); 监听复选框选择事件
    table.on('edit('table的lay-filter值')', function(obj){}); 监听单元格编辑事件
    table.on('row(test)', function(obj){}); 监听行单击事件
    table.on('tool(test)', function(obj){}); 监听行工具栏事件

    注意: 在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分.

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <!-- 自动渲染 -->
        <!-- lay-data属性配置基础参数信息 -->
        <!-- <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80}">用户ID</th>
                    <th lay-data="{field:'username', width:120}">用户名称</th>
                    <th lay-data="{field:'sex', width:50}">性别</th>
                    <th lay-data="{field:'city', width:80}">城市</th>
                    <th lay-data="{field:'sign', width:80}">签名</th>
                    <th lay-data="{field:'experience', width:80}">积分</th>
                    <th lay-data="{field:'score', width:80}">评分</th>
                    <th lay-data="{field:'wealth',sort:true}">财富</th>
                    <th lay-data="{field:'classify', width:80}">职业</th>
                </tr>
            </thead>
        </table> -->
        <input type="text"  id="name"/>
        
        <button id="searchBtn" class="layui-btn">搜索</button>
        <!-- 方法渲染 -->
        <table class="layui-table" id="myTable" lay-filter="myTableFilter"></table>
        
        <script type="text/html" id="titleTpl">
            {{#  if(d.sex == '男'){ }}
                <font color='red'>GG</font>
            {{#  } else if(d.sex == '女') { }}
                <font color='green'>MM</font>
            {{#  } }}
        </script>
        <script type="text/html" id="headBtns">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" lay-event='add'>
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </script>
        <script type="text/html" id="rowBtns">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" lay-event='update'>
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </script>
        <!-- 引入layui中JS -->
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['layer','jquery', 'table' ], function() {
                var $ = layui.jquery;
                var table = layui.table;
                var layer = layui.layer;
                // 渲染表格 且返回该表格对象
                var t = table.render({
                    id:'myTableId', // 容器对象的唯一标识
                    elem:"#myTable",// 绑定的table容器
                    url:'data/data01.json',//数据接口
                    page:true,// 开启分页
                    toolbar:"#headBtns",// 开启表头工具栏 默认会开启右侧默认工具栏
                    defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出   filter 筛选   print 打印    
                    width:1200, // 设置table容器宽度  只支持像素
                    height:520, // 设置table容器的高度  只支持像素
                    cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
                    done:function(res, curr, count){ //表格渲染完成后进行回调
                        console.log(res); // 返回的数据
                        console.log(curr);// 当前页
                        console.log(count);// 总数据条数
                    },
                    parseData:function(rs){//此时对数据进行解析适配  rs就是后台返回的数据
                        return {
                            "code":rs.code,
                            "msg":rs.msg,
                            "count":rs.count,
                            "data":rs.data.data
                        }
                        
                    },
                    response: {// 为响应的数据进行别名
                        //statusName: 'status' //规定数据状态的字段名称,默认:code
                        statusCode: 200 //规定成功的状态码,默认:0
                        //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
                        //,countName: 'total' //规定数据总数的字段名称,默认:count
                        //,dataName: 'rows' //规定数据列表的字段名称,默认:data
                      } ,
                     request: {//对默认请求参数进行别名
                            pageName: 'currentPage', //页码的参数名称,默认:page
                            limitName: 'pageSize' //每页数据量的参数名,默认:limit
                    },
                    where:{'name':'张三'},
                    totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
                    limit:20,//每页显示的条数
                    limits:[20,50,100],//每页条数的选择项
                    loading:true,//是否显示加载条  在table进行数据加载时,是否显示loading的效果
                    title:'用户表',//在数据导出时 用于设置文件的名称
                    text:{
                        none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
                      },
                    autoSort:false,// 是否前端进行排序
                    //skin:'nob', //边框风格
                    even:true,// 隔行背景
                    cols:[[
                        {type:'checkbox',width:80,LAY_CHECKED:false},
                        {field:'id',title:'ID', width:80},
                        {field:'username',title:'用户名', width:80},
                    /*  {field:'sex',title:'性别', width:80,templet:function(d){
                            var sex = d.sex;
                            if(sex =='男'){
                                return "<font color='red'>GG</font>";
                            }else if(sex =='女'){
                                return "<font color='green'>MM</font>";
                            }
                        }}, */
                        {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
                        {field:'city',title:'城市', width:80},
                        {field:'sign',title:'签名',edit:'text', width:80},
                        {field:'experience',title:'积分',width:80},
                        {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
                        {field:'wealth',title:'财富',totalRow:true,align:'center'},
                        {field:'classify',title:'职业', width:80,style:'color:red'},
                        {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
                    ]] //设置表头
                    
                });
                //===========事件监听=============
                //头工具栏事件监听
                table.on('toolbar(myTableFilter)', function(obj){
                    console.log(obj);
                    //获取事件类型
                    var event = obj.event;
                    if(event == 'add'){
                        console.log("触发添加");
                    }else if(event == 'del'){
                        console.log("触发删除");
                        //获取选中的数据
                        var data = table.checkStatus('myTableId');
                        console.log(data);//选中的数据
                        console.log(data.data);// 选中的具体数据
                        console.log(data.isAll);//是否全选   true 全选  false 不是全选
                    }
                });
                //==========表格行监听事件 ============
                table.on('tool(myTableFilter)', function(obj){
                    console.log(obj);
                    //获取事件类型
                    var event = obj.event; 
                    console.log(event);
                    var data = obj.data;// 获取该行数据
                    console.log(data);
                    if(event == 'update'){
                        console.log("修改业务");
                        //修改数据
                        obj.update({
                            'id':'UID',
                            'username':'韩梅梅'
                        });
                    }else if(event == 'del'){
                        console.log("删除业务");
                        //方法: 删除该行
                        obj.del();  
                    }
                });
            //=========复选框选择监听事件=============
            table.on('checkbox(myTableFilter)', function(obj){
                console.log(obj);
                console.log(obj.checked);//复选框的选中状态
                console.log(obj.data);//所在行的数据
            });
            //==========单元格编辑事件============
            table.on('edit(myTableFilter)', function(obj){
                console.log(obj);
                console.log(obj.value);//单元格编辑后的新值
                console.log(obj.data);//修改后的行数据
                console.log(obj.field);//被修改的字段
            });
            //=============行单击事件=============
            table.on('row(myTableFilter)', function(obj){
                console.log(obj);
                console.log(obj.data);
                layer.msg(JSON.stringify(obj.data));
            });
            // 重新渲染表格
            $("#searchBtn").click(function(){
                t.reload({
                        where:{
                            'name':$("#name").val(),
                            'minAge':18,
                            'maxAge':30
                        }
                })
            });
        });
        </script>
    </body>
    </html>

    日期和时间- laydate(重点)

    laydate使用

    1. 定义一个日期时间容器

    2. 初始化laydate组件

      入门示例:

      <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <!-- 引入layui的css样式 -->
      <link rel="stylesheet" href="layui/css/layui.css" />
      </head>
      <body>
       <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
       <div class="layui-inline">
           <input class="layui-input" id="beginTime" readonly="readonly" />
       </div>
       <!-- 引入layui中JS -->
       <script type="text/javascript" src="layui/layui.js"></script>
       <script type="text/javascript">
           //初始化layui模块
           layui.use(['layer','jquery', 'laydate' ], function() {
               var layer = layui.layer;
               var $ = layui.jquery;
               var laydate = layui.laydate;
               //2. 初始化组件
               laydate.render({
                   elem:"#beginTime"
               });
           });
       </script>
      </body>
      </html>

    配置参数

    属性名 值类型 说明
    elem DOM/String 绑定的容器
    type String year:只提供年列表选择
    month:只提供年、月选择
    date:年、月、日。type默认值
    time:只提供时、分、秒选择
    datetime:可选择:年、月、日、时、分、秒
    range Boolean/String 开启范围选择
    format String 时间字符串格式,默认:yyyy-MM-dd
    min/max string 最小值/最大值
    isInitValue boolean 是否允许给默认值
    trigger String 默认是:focus,如果绑定的元素非输入框,则默认事件为:click
    show boolean 是否默认显示
    zIndex number 设置浮层的层叠顺序,值越大显示在最外层
    showBottom boolean 是否显示底部工具栏
    btns array 底部工具栏按钮,默认值:['clear', 'now', 'confirm']
    lang string cn 中文(默认值) en 英文
    theme string default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
    calendar boolean 是否显示公历节日
    mark Object 标记重要的节日

    事件

    事件名 说明
    ready: function(date){} 组件弹出时触发
    change: function(value, date, endDate){} 年月日时间被切换时都会触发(只支持范围时生效)
    done: function(value, date, endDate){} 选择完成时 才生效

    代码示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <h1>年月日期选择器-date</h1>
        <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
        <div class="layui-inline">
            <input class="layui-input" id="beginTime" readonly="readonly" />
        </div>
        <h1>年月日期选择器-month</h1>
        <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
        <div class="layui-inline">
            <input class="layui-input" id="month" readonly="readonly" />
        </div>
        <h1>年月日期选择器-time</h1>
        <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
        <div class="layui-inline">
            <input class="layui-input" id="time" readonly="readonly" />
        </div>
        <h1>年月日期选择器-datetime</h1>
        <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
        <div class="layui-inline">
            <input class="layui-input" id="datetime" readonly="readonly" />
        </div>
        <h6>年月日期选择器-触发事件</h6>
        <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
        <div class="layui-inline">
            <button  id="btn1"  >选择时间</button>
        </div>
        <!-- 引入layui中JS -->
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['layer','jquery', 'laydate' ], function() {
                var layer = layui.layer;
                var $ = layui.jquery;
                var laydate = layui.laydate;
                //2. 初始化组件
                laydate.render({
                    elem:"#beginTime",
                    //range:true,//开启范围选择
                    //format: 'yyyy年MM月dd日', // 时间日期格式
                    value : '2019-11-19', // 设置默认值
                    min:'2019-01-01', // 限制的最小值
                    max:'2019-12-31', //限制的最大值
                    show:true, //是否默认显示
                    //showBottom:false, //是否显示底部工具栏
                    btns :['clear', 'now','confirm'],// 底部工具栏按钮
                    //lang :'en' ,// 显示的语言环境 
                    theme:'molv', //主题色
                    calendar:true, //是否显示公历节日
                    mark:{
                        '0-9-18':'国耻日',
                        '0-0-15':'发工资'
                    },   //标记重要的日子
                    ready: function(date){//组件打开时触发 
                        //注意 date  当前选中的时间  默认当前时间
                        console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    },
                    change: function(value, date, endDate){
                        console.log(value); //得到日期生成的值,如:2017-08-18
                        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
                    },
                    done: function(value, date, endDate){//选择完成时 才生效
                        console.log("done");
                        console.log(value); //得到日期生成的值,如:2017-08-18
                        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
                    }
                });
                laydate.render({
                    elem:"#month",
                    type:'month'
                });
                laydate.render({
                    elem:"#time",
                    type:'time'
                });
                laydate.render({
                    elem:"#datetime",
                    type:'datetime'
                });
                laydate.render({
                    elem:"#btn1"
                });
            });
        </script>
    </body>
    </html>

    弹出层-layer(重点)

    layer的使用

    1. 初始化layer对象
    2. 调用layer中方法

    入门示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <p>
            <button class="layui-btn" id="btn1">点击我</button>
            <button class="layui-btn" id="btn2">点击我</button>
        </p>
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['layer','jquery'], function() {
                var layer = layui.layer;
                var $ = layui.jquery;
                // 消息
                $("#btn1").click(function(){
                    layer.msg("弹出层  ----消息");
                });
                // 对话框
                $("#btn2").click(function(){
                    layer.alert("弹出层  ----消息");
                });
            });
        </script>
    </body>
    </html>

    基础参数

    属性名 值类型 说明
    type Number 层类型:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
    title String/Array/Boolean title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
    content String/DOM/Array content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
    skin String 弹出主题色,内置*layui-layer-lan**layui-layer-molv*
    area String/Array 弹出等的宽高,默认:'auto'
    offset String/Array 页面位置,默认:垂直水平居中
    icon Number 信息框和加载层的私有参数,只对这两种弹出层生效
    btn String/Array 默认:'确认'按钮,若想有多个,则使用数组
    btnAlign String 默认:r,内置的按钮的排列.
    btnAlign: 'l' 按钮左对齐
    btnAlign: 'c' 按钮居中对齐
    btnAlign: 'r' 按钮右对齐
    closeBtn String/Boolean layer提供了两种风格的关闭按钮,可通过配置12来展示,如果不显示,则closeBtn: 0
    shade String/Array/Boolean 即弹层外区域。默认是0.3透明度的黑色背景('#000'),如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
    shadeClose Boolean 默认:false ,是否点击遮罩关闭
    time Number 自动关闭所需毫秒
    id String 用于控制弹层唯一标识
    anim Number 弹出动画
    isOutAnim Boolean 默认:true,默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可
    maxmin Boolean 最大最小化,默认:false
    fixed Boolean 默认,true,即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
    resize Boolean 默认:true,是否允许改变弹层的大小
    maxWidth Number 弹层最大的宽度,默认360
    maxHeight Number 最大高度,默认:无
    zIndex Number 层叠顺序,默认:19891014
    move String/DOM/Boolean 默认:选中标题可以进行拖动,move: false
    moveOut Boolean 默认:false,是否允许拖拽到窗口外

    属性示例

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <p>
            <button class="layui-btn" id="btn1">点击我</button>
            <button class="layui-btn" id="btn2">点击我</button>
        </p>
        <hr />
        <p>
            <button class="layui-btn" id="btn3">演示弹层各种属性</button>
        </p>
        <div style="height: 2000px">111</div>   
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['layer','jquery'], function() {
                var layer = layui.layer;
                var $ = layui.jquery;
                // 消息
                $("#btn1").click(function(){
                    layer.msg("弹出层  ----消息");
                });
                // 对话框
                $("#btn2").click(function(){
                    layer.alert("弹出层  ----消息");
                });
                //===========演示弹层各种属性===========
                $("#btn3").click(function(){
                    layer.open({
                        title :'我是自己定义的标题', //标题
                        type:1,// 表示页面层   0  信息框   1  页面层   2  iframe
                        //  当type为 1时  此时 content 可以时html字符串,也可以dom对象
                        //  当type为2时, 此时 content是一个url地址
                        content:"<div>内容</div>",  
                        //skin:'layui-layer-lan',//主题色
                        area:['500px','500px'],//设置弹出层的宽高
                        //offset:'rb',// 弹层的位置
                        btn:['按钮1','按钮2'],//自定义按钮
                        btnAlign: 'c',//按钮排列方式
                        closeBtn :1, // 关闭按钮  1,2 2种, 0 表示没有关闭按钮
                        shade :[0.8, '#393D49'],// 透明度   颜色
                        shadeClose :true,// 点击遮罩层是否关闭
                        id:'layerId1',// 弹层唯一标识
                        anim:6, // 动画效果
                        //isOutAnim :false,// 关闭时的动画
                        maxmin:true,//最小最大化 
                        fixed :true,// 固定弹层的位置
                        resize:false,// 是否允许改变弹层大小
                        //move:false, //是否允许拖动  false 不允许拖动
                        moveOut:true //是否允许拖动到窗口外
                    });
                });
            });
        </script>
    </body>
    </html>

    方法

    方法名 说明
    index = layer.open(options) 根据配置,创建弹出层,返回弹出层的索引标识
    layer.close(index) 关闭指定索引的弹出层
    layer.closeAll([type]) 关闭所有的弹出层,关闭指定类型的弹出层
    layer.alert(content, options, yes) 普通信息框:
    content : 显示的内容
    yes:点击确定调用函数
    options:相关配置
    layer.confirm(content, options, yes) 询问框:
    content : 显示的内容
    yes:点击确定调用函数
    options:相关配置
    layer.msg(content, options, end) 提示框:
    content : 显示的内容
    end:提示框消失时调用的函数
    options:相关配置

    事件

    事件名称 说明
    success: function(layero, index){} 层弹出成功后回调的方法
    yes: function(index, layero){} 点击yes按钮调用的方法
    cancel: function(index, layero){} 点击右上角关闭按钮调用的方法
    end: function(index, layero){} 层销毁后调用的方法
    多个按钮自定义事件

    代码示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <p>
            <button class="layui-btn" id="btn1">点击我</button>
            <button class="layui-btn" id="btn2">点击我</button>
        </p>
        <hr />
        <p>
            <button class="layui-btn" id="btn3">演示弹层各种属性</button>
        </p>
        <hr />
        <p>
            <button class="layui-btn" id="btn4">弹出的信息框</button>
        </p>
        <hr />
        <p>
            <button class="layui-btn" id="btn5">弹出的询问框</button>
        </p>
        <hr />
        <p>
            <button class="layui-btn" id="btn6">弹出的提示框</button>
        </p>
        
        
        <script type="text/javascript" src="layui/layui.js"></script>
        <script type="text/javascript">
            //初始化layui模块
            layui.use(['layer','jquery'], function() {
                var layer = layui.layer;
                var $ = layui.jquery;
                // 消息
                $("#btn1").click(function(){
                    layer.msg("弹出层  ----消息");
                });
                // 对话框
                $("#btn2").click(function(){
                    layer.alert("弹出层  ----消息");
                });
                //=====演示弹层各种属性=================================================
                $("#btn3").click(function(){
                    layer.open({
                        title :'我是自己定义的标题', //标题
                        type:1,// 表示页面层   0  信息框   1  页面层   2  iframe
                        //  当type为 1时  此时 content 可以时html字符串,也可以dom对象
                        //  当type为2时, 此时 content是一个url地址
                        content:"<div>内容</div>",  
                        //skin:'layui-layer-lan',//主题色
                        area:['500px','500px'],//设置弹出层的宽高
                        //offset:'rb',// 弹层的位置
                        btn:['按钮1','按钮2','按钮3','按钮4'],//自定义按钮
                        btnAlign: 'c',//按钮排列方式
                        closeBtn :1, // 关闭按钮  1,2 2种, 0 表示没有关闭按钮
                        shade :[0.8, '#393D49'],// 透明度   颜色
                        shadeClose :true,// 点击遮罩层是否关闭
                        id:'layerId1',// 弹层唯一标识
                        anim:6, // 动画效果
                        //isOutAnim :false,// 关闭时的动画
                        maxmin:true,//最小最大化 
                        fixed :true,// 固定弹层的位置
                        resize:false,// 是否允许改变弹层大小
                        //move:false, //是否允许拖动  false 不允许拖动
                        moveOut:true, //是否允许拖动到窗口外
                        success:function(layero, index){//弹层 成功弹出调用的方法
                            console.log("success");
                        },
                        yes: function(index, layero){ //点击确认按钮触发的方法
                            console.log("yes");
                        },
                        cancel: function(index, layero){//点击关闭按钮触发的方法
                            console.log("cancel");
                        },
                        end: function(index, layero){//弹层销毁触发的方法
                            console.log("end");
                        },
                        btn2: function(index, layero){//为按钮绑定事件
                            layer.msg("按钮2");
                            //阻止弹层自动关闭
                            return false;
                          }
                        ,btn3: function(index, layero){
                             layer.msg("按钮3");
                        }
                        ,btn4: function(index, layero){
                             layer.msg("按钮4");
                        }
                    });
                });
                
                // 弹出信息框
                $("#btn4").click(function(){
                    layer.alert("显示内容",{"icon":9},function(index){
                        console.log("点击了确定");
                        //关闭弹层
                        layer.close(index);
                    });
                });
                // 弹出询问框
                $("#btn5").click(function(){
                    layer.confirm("确定要删除吗?",{"icon":6},function(index){
                        console.log("点击了确定");
                        //关闭弹层
                        layer.close(index);
                    });
                });
                // 弹出提示框
                $("#btn6").click(function(){
                    layer.msg("确定要删除吗?",{"icon":6},function(index){
                        console.log("消失了");
                    });
                });
                    
            });
        </script>
    </body>
    </html>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!