1. 技术文章
  2. LayUI笔记

LayUI笔记

由 谁说我不能喝 提交于 2019-12-05 18:10:39

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-space5、 layui-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. 在
    4. 标签中设置属性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提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则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>
标签
form表单提交
js代码
html代码
选项卡
input
lay
element
form
js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!