LayUI概述

和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本

下载与结构

1.官网：https://www.layui.com/

2.下载完成解压，我们看到目录结构

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

快速使用

1.第三方 CDN 方式引入：

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>

<!-- 引入 layui.js -->		
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

2.下载本地使用：

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

<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

3.首个例子 Hello World

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui的使用</title>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	</head>
	<body>
		<script>
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello World');
			});
		</script>
	</body>
</html>

布局

布局容器

固定宽度（两侧有留白效果）

关键知识点：layui-container

<div class="layui-container" style="background-color:navajowhite; height:300px;">
	固定宽度（两侧有留白效果）
</div>

完整宽度（占据屏幕宽度的100%）

关键知识点：layui-fluid

<div class="layui-fluid" style="background-color:navajowhite; height:300px;">
	完整宽度（占据屏幕宽度的100%）
</div>

栅格系统

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

列组合

①定义行 layui-row

②定义列 layui-col-md*

md表示不同屏幕的标识（xs、sm、md、lg）
该列所占用的12等分数（如6/12），可选值为 1 – 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

<div class="layui-container"><!--布局容器-->
	<div class="layui-row"><!--定义行-->
		<div class="layui-col-md5" style="background-color:blue;">内容5/12</div>
		<div class="layui-col-md7" style="background-color:red;">内容7/12</div>
	</div>
	<div class="layui-row"><!--定义行-->
		<div class="layui-col-md4" style="background-color:blue;">内容4/12</div>
		<div class="layui-col-md4" style="background-color:red;">内容4/12</div>
		<div class="layui-col-md6" style="background-color:green;">内容6/12</div>
	</div>
</div>

列可以同时出现最多四种不同的组合，分别是：

xs（超小屏幕，如手机）
sm（小屏幕，如平板）
md（桌面中等屏幕）
lg（桌面大型屏幕）

以呈现更加动态灵活的布局。

<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
	<!-- 小屏幕占6列，中屏幕占4列 -->
	<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
		平板≥768px：6/12 | 桌面端≥992px：4/12
	</div>
</div>

<div class="layui-row">
	<!-- 小屏幕占4列，中屏幕占6列 -->
	<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
		平板≥768px：4/12 | 桌面端≥992px：6/12
	</div>
</div>

<div class="layui-row">
	<!-- 小屏幕占12列，中屏幕占8列 -->
	<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
		平板≥768px：12/12 | 桌面端≥992px：8/12
	</div>
</div>

列边距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

**layui-col-space *** （1-30）

*值是 px值（1 2 4 5 6 8 10 12 14 15 16 18 20 22 24 25 26 28 30）4个单数

<div class="layui-row layui-col-space20">
	<div class="layui-col-md4">
		<!-- 给具体的内容设置背景颜色 -->
		<div style="background-color: blue">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: green">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: blue">4</div>
	</div>
</div>

ayui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
```
<div class="layui-col-md4" style="background-color: blue">
	4
</div>
```
意思整体也会上色，看不到细节
如果需要的间距高于30px（一般不常见），我们需要采用列偏移

列偏移

layui-col-md-offset* (1-12) 从而让列向右偏移

其中 * 号代表的是偏移占据的列数，可选中为 1 – 12
如 layui-col-md-offset3 ，即代表在中型桌面屏幕下，让该列向右偏移3个列宽度。

<div class="layui-row">
	<div class="layui-col-md4">
		<div style="background-color: red">4</div>
	</div>
			       
	<!--向右移4列-->
	<div class="layui-col-md4 layui-col-md-offset4">
		<div style="background-color: blue">向右移4列</div>
	</div>
</div>

列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

<div class="layui-row">
	<!-- 大的盒子占6列 -->
	<div class="layui-col-md6">
		<div style="background-color: red">
		 	<div class="layui-row">
		    	<!-- 嵌套列 -->
		        <div class="layui-col-md3" style="background-color: green;">嵌套1</div>
		        <div class="layui-col-md5" style="background-color: indianred;">嵌套2</div>
		        <div class="layui-col-md2" style="background-color: greenyellow;">嵌套3</div>
		     </div>
		 </div>
	</div>
</div>

按钮

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

基础按钮

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>

主题

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

尺寸

语法：layui-btn-{type} 其中 type:lg sm xs fluid

<button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-sm">小型警告按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

圆角

语法：layui-btn-radius

<button class="layui-btn layui-btn-radius">默认圆角按钮</button>    
<button class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button>    
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button>    
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button>    
<button class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button>    
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用圆角按钮</button>

搭配组合

<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭</button>
<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">小型警告</button>
<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">迷你禁止</button>

图标

对 i 标签设定 class="layui-icon"
然后对元素加上图标对应的 font-class
内置图标一览表：https://www.layui.com/doc/element/icon.html

<i class="layui-icon layui-icon-heart-fill"></i>

定义它的颜色或者大小

<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>

与文字多种组合

<button type="button" class="layui-btn">
	<i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button>
			 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	<i class="layui-icon layui-icon-left"></i>
</button>

<button type="button" class="layui-btn">			
	<i class="layui-icon">&#xe608;</i> 添加		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">			
	<i class="layui-icon">&#x1002;</i> 刷新		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">			
	<i class="layui-icon layui-icon-heart"></i> 关注		
</button>

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<a href="javascript:;">解决方案</a>
<a href="">解决方案</a>

垂直导航

class=“layui-nav layui-nav-tree”

侧边导航

class=“layui-nav layui-nav-tree layui-nav-side”

内置了图片和徽章

layui-badge可显示数字9
layui-badge-dot可显示点
layui-nav-img可显示图片

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>

主题

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
  …
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑

<span class="layui-breadcrumb" lay-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>

选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
依赖加载模块：element

<!-- 默认风格 .layui-tab-->
<div class="layui-tab">
<!-- 设置选项卡标题 .layui-tab-title -->
	<ul class="layui-tab-title">
		<li>网站设置</li>
		<li>用户管理</li>
		<li class="layui-this">权限分配</li>
		<li>商品管理</li>
		<li>订单管理</li>
	</ul>
	<!-- 设置选项卡的内容 .layui-tab-content -->
	<div class="layui-tab-content">
		<div class="layui-tab-item">内容1</div>
		<div class="layui-tab-item">内容2</div>
		<!-- 默认显示此内容 -->
		<div class="layui-tab-item layui-show">内容3</div>
		<div class="layui-tab-item">内容4</div>
		<div class="layui-tab-item">内容5</div>
	</div>
</div>

layui-tab 默认风格
layui-tab-brief 简洁风格
layui-tab-card 卡片风格

带删除Tab lay-allowClose=“true”

表格

class=“layui-table”
常用属性
lay-even 如果设置了该属性，则可以显示隔行换色的效果
lay-skin 设置表格边框风格
line （行边框风格）
row （列边框风格）
nob （无边框风格）
lay-size 设置表格的尺寸
sm （小尺寸）
lg （大尺寸）

<table class="layui-table">
    <colgroup>
        <!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
        <col width="150">
        <col width="300">
        <col>
    </colgroup>
    <!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
    <thead>
        <!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
        <tr>
            <!-- th 用于定义表格中的表头,必须嵌套在 tr 中 -->
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
    </tbody>
</table>

表单

引入的资源
依赖加载模块

<!-- 加载模块 -->
<script type="text/javascript">
    // 加载form模块
    layui.use("form",function(){
        var form = layui.form;
    });		
</script>

3.在一个容器中设定 class="layui-form" 来标识一个表单元素块

<form class="layui-form" action="">
...
</form>

4.基本的行区块结构，它提供了响应式的支持

给 div 添加 class="layui-form-item" 代表”行“
给 label 添加 class="layui-form-label" 代表”区“
给 div 添加 class="layui-input-inline" 代表”块“

输入框

<form action="" class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">标题区域</label>
		<div class="layui-input-inline">
			<!--输入框-->
			<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" 
				autocomplete="off" class="layui-input"/>
		</div>
	</div>
			
	<div class="layui-form-item">
		<label class="layui-form-label">密码框区域</label>
		<div class="layui-input-inline">
			<input type="password" name="password" required lay-verity="required" placeholder="请输入密码"
				autocomplete="off" class="layui-input"/>
		</div>
	</div>		
</form>

常用属性	描述
required	浏览器固定的必填字段
lay-verify	需要验证的类型(值为 required 的话表示必填项)
class=“layui-input”	提供的通用的样式(layui.css提供的通用CSS类)
class=“layui-input-block”	占据全部宽度
class=“layui-input-inline”	占据部分宽度
placeholder	当文本框为空时，默认显示的文本信息
autocomplete	表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

下拉选择框

通过selected属性设置默认选中项
通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）

<div class="layui-form-item">
	<label class="layui-form-label">城市</label>
	<div class="layui-input-inline">
		<select name="city" lay-verify="required">
			<option value="">请选择一个城市</option>
			<option value="010">北京</option>
			<option value="021" selected>上海</option>
			<option value="0571" disabled>杭州</option>
		</select>
	</div>
</div>

optgroup 标签给select分组：

<select name="quiz">
  <option value="">请选择</option>
  
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

通过设置lay-search属性开启搜索匹配功能

<div class="layui-form-item">
	<select name="city" lay-verify="" lay-search>
		<option value="">请选择</option>
		<option value="010">layer</option>
		<option value="021">form</option>
		<option value="05771">layui</option>
	</select>
</div>

复选框

通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
通过 checked 属性设置被选中的项
通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)
通过 disabled 属性禁用元素

<div class="layui-form-item">
	<label class="layui-form-label">爱好</label>
	<div class="layui-input-block">
		<!--默认效果-->
		<input type="checkbox" name="hobby" title="唱歌" checked value="sing"/>
		<input type="checkbox" name="hobby" title="跳舞" value="dance"/>
		<input type="checkbox" name="hobby" title="禁用" disabled />
		<br>
		<!--原始效果-->
		<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
		<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
		<input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled />
	</div>
</div>

开关

将复选框，设置 lay-skin="switch" 形成开关风格
通过 lay-text="打开的值|关闭的值" 来设定开关的两种状态的文本，通过| 分隔
通过 checked 属性设置默认打开状态
通过 disabled 属性禁用开关
通过 value 属性设置选中的值

<div class="layui-form-item">
	<label class="layui-form-label">开关</label>
	<div class="layui-input-block">
		<input type="checkbox" name="aa" lay-skin="switch" />
		<input type="checkbox" name="bb" lay-skin="switch" checked />
		<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
		<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
		<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
	</div>
</div>

单选框

通过 checked 设置默认选中项
通过 disabled 属性禁用单选框
通过 value 属性设置选中的值

<div class="layui-form-item">
	<label class="layui-form-label">性别</label>
	<div class="layui-input-block">
		<input type="radio" name="sex" value="nam" title="男" />
		<input type="radio" name="sex" value="nv" title="女" checked />
		<input type="radio" name="sex" value="" title="中性" disabled />
	</div>
</div>

文本域

给 textarea 标签添加class="layui-textarea"

<div class="layui-form-item">
	<label class="layui-form-label">简介</label>
	<div class="layui-input-inline">
		<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">
			...			
		</textarea>
	</div>
</div>

组装行内表单

行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）

给 div 设置 class="layui-inline" ：定义外层行内
给 div 设置 class="layui-input-inline" ：定义内层行内

<div class="layui-form-item">
	<!--定义外层行内 layui-inline-->
	<div class="layui-inline">
		<!--定义内层行内 layui-input-inline-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
	<!--定义外层行内-->
	<div class="layui-inline">
		<label class="layui-form-label">密码</label>
		<!--定义内层行内-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="password" name="" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
</div>

表单方框风格

<form class="layui-form layui-form-pane" action="">
	<div class="layui-form-item" pane>
	<label class="layui-form-label">单选框</label>
		<div class="layui-input-block">
			<input type="radio" name="sex" value="男" title="男">
			<input type="radio" name="sex" value="女" title="女" checked>
		</div>
	</div>
</form>

最后是提交和充值按钮

<div class="layui-form-item">
	<div class="layui-btn" lay-submit lay-filter="formDemoe">立即提交</div>
	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>

弹出层

layer可以独立使用，也可以通过LayUI模块使用

两种使用方式

作为独立组件使用

首先去layer独立版本官网下载组件包
下载完成后解压，复制到目录

layer.js 来自(layer\layer.js)
layer.css 来自(layer\theme\default\layer.css)
jQuery1.8以上任意版本

引入资源

<!-- 引入 layer.css -->
<link rel="stylesheet" href="layer/layer.css" />
<!--引入jquery.js-->
<script src="js/jquery-3.5.1.js"></script>
<!-- 引入layer.js -->
<script src="layer/layer.js"></script>

开始使用

<script type="text/javascript">
	layer.msg('Hello');
</script>

使用模块化

引入资源

<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

在script中使用layui.use()加载模块依赖模块：layer

<script type="text/javascript">
	layui.use("layer",function(){
        var layer=layui.layer;
		layer.msg('Hello world');
	})		
</script>

基础参数

基本案例，三大参数

<script type="text/javascript">
	layui.use("layer",function(){
	var layer=layui.layer;
	layer.open({
		type:0,
		title:"系统消息",
		//content可以传入任意的文本或html
		content:"Hello" 
			});
		})
</script>

type-及时层类型

类型Number,默认为0
layer提供5种层类型。可传入的值有
0 信息框，默认

1 页面层

2 iframe层

3 加载层

4 tips层

若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）

title-标题

类型String/Array/Boolean，默认为信息
若不想显示标题，则title:false
title支持三种类型

若传入的是普通的字符串，如：title:'我是标题' ，那么只会改变标题文本；

若需要自定义标题区域样式，title:['文本','color:red;font-size: 18px;']，数组第二项可以写任意css 样式

若不想显示标题栏，title: false

content内容

类型：String/DOM/Array，默认 : ” “

页面层 ,就是信息提示
iframe 弹出来的是页面,例如百度页面
tips 就是一个信息提示小框

layer.open({
	type:1,
	title:"系统消息",
	content:"<div style='height:200px;width:200px'>Hello</div>"
});

layer.open({
	type:2,
	title:"系统消息",
	content:"https://www.baidu.com/"
});

content如不出现滚动条，则content:[‘url’,‘no’]
content如要固定宽高，则content:‘url’,area:‘500px’

area宽高

类型： String/Array，默认为auto
在默认状态下，layer是宽高都自适应的

但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的

当你宽高都要定义时，你可以 area: ['500px', '300px']

<span>内容1</span>
<span id="sp">内容2</span>
<span>内容3</span>
<span>内容4</span>
	
<script type="text/javascript">
	layui.use("layer",function(){
		var layer=layui.layer;
			/* tips层 */
			 layer.open({
			  	type: 4,
			     content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
		});	 
	});
</script>

icon图标

类型：Number，默认：-1(信息框) / 0(加载层)
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6
如果是加载层，可以传入0-2

script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //加载层
            layer.alert('酷毙了', {
                icon: 1				// 0 ~ 6 均可填
            });
        })
</script>

 <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //信息层
            layer.msg('不开心。。', {
                icon: 5				// -1 ~ 6 均可填
            });
        })
 </script>

<script type="text/javascript">
	layui.use('layer', function() {
     	var layer = layui.layer;
			// 加载层
            layer.load(1); 		// 0 ~ 2 均可填
        })
</script>

btn按钮

类型：String/Array，默认 ‘确认’
信息框(type = 0)模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
当您只想自定义一个按钮时，你可以 btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]
当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推

<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.msg('你愿意和我做朋友么？', {
                time: 0, //第一个弹出层不自动关闭(因为默认弹出层会5s自动关闭)
                btn: ['当然愿意', '狠心拒绝'], // 按钮
                yes: function(index) {
                    layer.close(index); // 关闭当前弹出框
                    layer.msg('新朋友，你好！', {
                        icon: 6, // 图标
                        btn: ['开心', '快乐']
                    });
                }
            });
        })
    </script>
</body>

time自动关闭所需毫秒

类型：Number，默认为0
默认不会关闭。当你想关闭时，可以 time:5000 ，即代表 5 s 后自动关闭

offset – 坐标

类型：String/Array，默认：垂直水平居中
offset默认情况下不用设置。但如果你不想垂直水平居中

核心方法

原始核心方法

layer.open(options)

<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;

            var index = layer.open({
                content: 'test'
            });
            console.log(index);
            //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

        })
    </script>
</body>

普通信息框

layer.alert(content, options, yes)

<script type="text/javascript">
    layui.use('layer', function() {
        var layer = layui.layer;

        //eg1
        //layer.alert('只想简单的提示');
        //eg2
        layer.alert('加了个图标', {
            icon: 1
        });
    })
</script>

询问框

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

layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  
  layer.close(index);
});

提示框

layer.msg(content, options, end)

layer.msg('关闭后想做些什么', function(){
  //do something
});

加载层

layer.load(icon, options)

var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒

日期与时间选择

引入资源

<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

在 script 中使用 layui.use() 加载模块 ;依赖模块：laydate

<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // 加载 laydate 实例
            laydate.render({
                elem: "#date1" //绑定id为date1的元素
            })
        })
    </script>
</body>

基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数

elem绑定元素

类型：String/DOM ，默认值：无
必填项，用于执行绑定日期渲染的元素，值一般为选择器，或DOM对象

<script>
	layui.use('laydate',function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test' 
       //或 elem: document.getElementById('test')、elem: lay('#test') 等
        })
    })
</script>

type控件选择类型

类型：String ，默认值：date
用于单独提供不同的选择器类型，可选值如下表

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date2" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date3" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date4" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date5" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date6" />
    </div>

    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // 加载 laydate 实例
            laydate.render({
                elem: "#date1", //绑定id为date1的元素
            });

            laydate.render({
                elem: "#date2", //绑定id为date2的元素
                type: "year", // 年选择器
            });

            laydate.render({
                elem: "#date3", //绑定id为date3的元素
                type: "month" // 年月选择器
            });

            laydate.render({
                elem: "#date4", //绑定id为date4的元素
                type: "date" // 年月日选择器
            });

            laydate.render({
                elem: "#date5", //绑定id为date5的元素
                type: "time" // 时间（时分秒）选择器
            });

            laydate.render({
                elem: "#date6", //绑定id为date6的元素
                type: "datetime" // 年月日时分秒选择器
            });

        })
    </script>
</body>

format自定义格式

类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符	说明
yyyy	年份，至少四位数。如果不足四位，则前面补零
y	年份，不限制位数，即不管年份多少位，前面均不补零
MM	月份，至少两位数。如果不足两位，则前面补零。
M	月份，允许一位数。
dd	日期，至少两位数。如果不足两位，则前面补零。
d	日期，允许一位数。
HH	小时，至少两位数。如果不足两位，则前面补零。
H	小时，允许一位数。
mm	分钟，至少两位数。如果不足两位，则前面补零。
m	分钟，允许一位数。
SS	秒数，至少两位数。如果不足两位，则前面补零。
S	秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒	2017年08月18日 20时08分08秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy年M月	2017年8月
M月d日	8月18日
北京时间：HH点mm分	北京时间：20点08分
yyyy年的M月某天晚上，大概H点	2017年的8月某天晚上，大概20点

<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //自定义日期格式
            laydate.render({
                elem: '#date1',
                format: 'yyyy/MM月dd日' // yyyy年MM月dd日可任意组合
            });
        });
    </script>
</body>

value初始值

类型：String，默认值：new Date()
支持传入符合format参数设定的日期格式字符，或者 new Date()

<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        // 传入符合format格式的字符给初始值
        laydate.render({
            elem: '#date1',
            value: '2018-08-18' //必须遵循format参数设定的格式
        });
        // 传入Date对象给初始值
        laydate.render({
            elem: '#date2',
            value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
        });
    });
</script>

lang语言

类型：String，默认：cn
内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。

<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'en'
        });
    });
</script>

theme主题

类型：String ，默认值：default
内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            theme: 'molv'
        });

    });
</script>

calendar公历节日

类型：Boolean，默认值：false
内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示

<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'cn',
            calendar: true
        });

    });
</script>

分页

模块加载名称：laypage
laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染

<body>
    <div id="page"></div>
    <script type="text/javascript">
        // 加载laypage模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
            });

        });
    </script>
</body>

基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数

elem绑定元素

类型：String/Object，比填项
elem 指向存放分页的容器，值可以是容器 ID、DOM对象

elem: ‘id’注意：这里不能加#` 号

elem: document.getElementById('id')

count数据总数

类型：Number，必填项
数据总数，一般通过服务端得到
count: 100

limit每页显示条数

类型：Number，默认值 10
laypage将会借助 count 和 limit 计算出分页数。

<body>
    <div id="page"></div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
                limit: 5, // 每页显示的数量
            });
        });
    </script>
</body>

layout自定义排版

类型：Array，默认值：[‘prev’, ‘page’, ‘next’]
自定义排版，可选值有：
- count ：总条目输出区域
- limit：条目选项区域
- prev：上一页区域
- page：分页区域
- next：下一页区域
- refresh：页面刷新区域(layui 2.3.0新增)
- skip：快捷跳页区域

<body>
    <div id="page"></div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
                layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh']
            });
        });
    </script>
</body>

limits每页条数的选择

类型：Array，默认值：[10,20,30,40,50]
如果 layout 参数开启了 limit，则会出现每页条数的select下拉选择框

groups连续出现的页码个数

类型：Number，默认值为5
连续出现的页面个数，就是分页区域省略号…之前显示的页面个数

jump切换分页的回调

当分页被切换时触发，函数返回两个参数：
obj（当前分页的所有选项值）、
first（是否首次，一般用于初始加载的判断）

jump: function(obj, first) {
    // obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    //首次不执行
    if (!first) {
    	//do something
    }
}

数据表格

支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
模块加载名称：table

<body>
    <!-- 准备容器（标签），设置id属性值 -->
    <div id="demo"></div>

    <script type="text/javascript">
        // 加载table模块
        layui.use('table', function() {
            var table = layui.table;
            // 加载table实例
            table.render({
                elem: "#demo", //elem属性用来绑定容器的id属性值
                url: "js/user.json", // 数据接口
                cols: [
                    [{
                        field: 'id',
                        title: '用户编号',
                        sort: true,
                        width: 120
                    }, {
                        field: 'username',
                        title: '用户姓名',
                        width: 100
                    }, {
                        field: 'sex',
                        title: '性别',
                        width: 100,
                        sort: true
                    }, {
                        field: 'city',
                        title: '城市',
                        width: 100
                    }, {
                        field: 'sign',
                        title: '签名'
                    }]
                ],
            })

        })
    </script>
</body>

注意：上面有一个数据接口 url，通常是从服务器获取。我们这里先本地模拟一些json数据传入

{
	"code": 0,
	"msg": "",
	"count": 50,
	"data": [{
			"id": 10000,
			"username": "user-0",
			"sex": "女",
			"city": "城市-0",
			"sign": "签名-0"			
		},
		{
			"id": 10001,
			"username": "user-1",
			"sex": "男",
			"city": "城市-1",
			"sign": "签名-1"
		},
		{
			"id": 10002,
			"username": "user-2",
			"sex": "女",
			"city": "城市-2",
			"sign": "签名-2"
		},
		{
			"id": 10003,
			"username": "user-3",
			"sex": "女",
			"city": "城市-3",
			"sign": "签名-3"
		},
		{
			"id": 10004,
			"username": "user-4",
			"sex": "男",
			"city": "城市-4",
			"sign": "签名-4"
		}

	]
}

绑定容器、设置数据接口、在表头设定对应的字段

三种初始化渲染方式

方法渲染

1.将基础参数的设定放在了JS代码中，且原始的table标签只需要一个选择器

<div id="demo"></div>

2.渲染表格

layui.use('table',function(){
	var table = layui.table;
    table.render({
                elem: "#demo",
                url: 'js/user.json', // 数据接口
                height: 315, // 容器高度
                page:true, // 开启分页
                cols: [[  // 设置表头
                    {field: 'id', title: 'ID'},
                    {field: 'username', title: '用户名'},
                    {field: 'sex', title: '性别'}
                ]]
            });
        });

注: table.render()方法返回一个对象: var tableIns = table.render(options)，可用于对当前表格进行”重载”等操作。

自动渲染

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

带有 class="layui-table" 的 <table> 标签
对标签设置属性 lay-data=" " 用于配置一些基础参数
在 <th> 标签中设置属性 lay-data=" " 用于配置表头信息。

<body>
    <table class="layui-table" lay-data="{height:315, url:'js/user.json', page:true, id:'test'}" lay-filter="test">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:80}">用户名</th>
                <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

        })
    </script>
</body>

elem绑定元素

类型：String/DOM
指定原始 table 容器的选择器或 DOM，方法渲染方式为必填

cols设置表头

类型：Array
设置表头，值是一个二维数组。表头参数设定在数组内，表头部分参数如下：

参数	类型	说明	示例值
field	String	设定字段名。非常重要，与表格数据列要一一对应	usename
title	String	设定标题名称	用户名
width	Number/String	设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比。	200/30%
type	String	设定列类型。可选值有： normal（常规列，无需设定） checkbox（复选框列） radio（单选框列，layui 2.4.0 新增） numbers（序号列） space（空列）	任意一个可选值
sort	Boolean	是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。	true
unresize	Boolean	是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。	false
edit	String	单元格编辑类型（默认不开启）目前只支持：text（输入框）	text

url异步数据参数

还是一句话，不必记忆，会查会用会修改即可

page开启分页

类型：Boolean/Object，开启分页(默认为 false)
支持传入一个对象，里面可包含 laypage 组件所有支持的参数(jump、elem除外)

<body>
    <!-- 准备一个容器,设置id属性值 -->
    <table id="demo"></table>
    <script type="text/javascript">
        // 加载 table 模块
        layui.use('table', function() {
            var table = layui.table;
            // 加载table 实例
            table.render({
                elem: "#demo",      // elem属性用来绑定容器的 id 属性值
                url: "js/user.json",// 数据接口
                cols:[[
                    // 设置序列号
                    {field:'aa',type:"numbers"},
                    // 设置复选框列
                    {field:'bb',type:"checkbox"},
                    {field:'id',title:'用户编号',sort:true,width:120},
                    {field:'username',title:'用户姓名',width:100},
                    {field:'sex',title:'性别',width:100,sort:true},
                    {field:'city',title:'城市',width:100},
                    {field:'sign',title:'签名'}
                ]],
                // 开启分页
                page: true
            })
        })
    </script>
</body>

{field:‘aa’,type:“numbers”} 序列号码
{field:‘bb’,type:“checkbox”} 复选框列

toolbar开启表格头部工具栏

类型：String/DOM/Boolean，开启表格头部工具栏，该参数支持四种类型值

toolbar: ‘#toolbarDemo’ 指向自定义工具栏模板选择器
toolbar: ‘
xxx

’ 直接传入工具栏模板字符
toolbar: true 仅开启工具栏，不显示左侧模板
toolbar: ‘default’ 让工具栏左侧显示默认的内置模板

<body>    <div id="demo"></div>    <!-- 表格工具栏 -->    <script type="text/html" id="toolbarDemo">        <div class="layui-btn-container">            <!-- lay-event 给元素绑定事件名 -->            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">                获取选中行数据            </button>            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">                获取选中数目            </button>            <button class="layui-btn layui-btn-sm" lay-event="isAll">                验证是否全选            </button>        </div>    </script>    <!-- 表头工具栏 -->    <script type="text/html" id="barDemo">        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>    </script>    <script type="text/javascript">        layui.use('table', function() {            var table = layui.table;            table.render({                elem: "#demo",                url: 'js/user.json', // 数据接口                cols:[[						// 设置序列号列						{field:'aa',type:"numbers"},						// 设置复选框列						{field:'aa',type:"checkbox"},						{field:'id',title:'用户编号',sort:true,width:120,hide:true},						{field:'username',title:'用户姓名',width:100,edit:'text'},						{field:'sex',title:'性别',width:100,sort:true},						{field:'city',title:'城市',width:100},						{field:'sign',title:'签名',edit:'text'},						// 设置表头工具栏						{field:"操作",toolbar:"#barDemo"}					]],					// 开启分页					page:true,					// 设置表格工具栏					toolbar:"#toolbarDemo"            })        })    </script></body>

defaultTooBlar头部工具栏右侧图标

类型：Array，默认值：[“filter”,“exports”,“print”]
该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：
- filter: 显示筛选图标
- exports: 显示导出图标
- print: 显示打印图标

监听头工具栏事件

点击头部工具栏区域设定了属性为 lay-event=”” 的元素时触发

语法：table.on(‘event(filter)’,callback)
event 为内置事件名，filter 为容器 lay-filter 设定的值

回调函数返回一个 object 参数

obj.config对象中可以获取id属性值，即表示当前容器的ID属性值
obj.event 对象中可以获取事件名
table.checkStatus(obj.config.id) 获取当前表格被选中记录对象，返回数组

<body>
    <div id="demo" lay-filter="test"></div>

    <!-- 表格工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                验证是否全选
            </button>
        </div>
    </script>

    <!-- 表头工具栏 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: "#demo",
                url: 'js/user.json', // 数据接口
                cols: [
                    [
                        // 设置序列号列
                        {
                            field: 'aa',
                            type: "numbers"
                        },
                        // 设置复选框列
                        {
                            field: 'aa',
                            type: "checkbox"
                        }, {
                            field: 'id',
                            title: '用户编号',
                            sort: true,
                            width: 120,
                            hide: true
                        }, {
                            field: 'username',
                            title: '用户姓名',
                            width: 100,
                            
                        }, {
                            field: 'sex',
                            title: '性别',
                            width: 100,
                            sort: true
                        }, {
                            field: 'city',
                            title: '城市',
                            width: 100
                        }, {
                            field: 'sign',
                            title: '签名',
                            
                        },
                        // 设置表头工具栏
                        {
                            field: "操作",
                            toolbar: "#barDemo"
                        }
                    ]
                ],
                // 开启分页
                page: true,
                // 设置表格工具栏
                toolbar: "#toolbarDemo"
            })

            /**
             * 头监听事件
             * 	语法：
             * 		table.on('toolbar(demo)',function(obj){
                 
                    });
                    注:demo表示的是容器上设置的lay-filter属性值
                */
            
            table.on('toolbar(test)', function(obj) {
                // console.log(obj);
                // obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo 
                // 获取当前表格被选中记录对象，返回数据
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                // 获取事件名
                var eventName = obj.event;
                // 判断事件名，执行对应的代码
                switch (eventName) {
                    case "getCheckData":
                        // 获取被选中的记录的数组
                        var arr = checkStatus.data;
                        // 将数组解析成字符串
                        layer.alert(JSON.stringify(arr));
                        break;
                    case "getCheckLength":
                        // 获取被选中的记录的数组
                        var arr = checkStatus.data;
                        layer.msg("选中了" + arr.length + "条记录！")
                        break;
                    case "isAll":
                        // 通过isAll属性判断是否全选
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选';
                        layer.msg(str);
                        break;
                    case "LAYTABLE_TIPS":
                        layer.alert("这是一个自定义的图标按钮");
                        break;
                }
            });

        })
    </script>
</body>

lay-filter=“test”
table.on(‘toolbar(test)’, function(obj) {｝

监听行工具栏事件

语法：table.on(‘tool(filter)’,callback{})

filter 为容器 lay-filter 设定的值

回调函数返回一个 object 参数

obj.data 获取当前行数据
obj.event 获取 lay-event 对应的值 (也可以是表头 event 参数对应的值)

/**
  * 监听行工具栏事件
  */
table.on('tool(test)', function(obj) {
	// 得到当前操作行的相关信息
    var tr = obj.data;
    console.log(tr);
    // 得到事件名
    var eventName = obj.event;

    // 判断事件名，执行对应的方法
    if (eventName == 'del') { // 删除
    	// 确认框
    	layer.confirm("您确认要删除吗？", function(index) {
    		// 删除指定tr  del()
     		obj.del();
        	// 关闭弹出层（index是当前弹出层的下标）
        	layer.close(index);
     	});
     } else if (eventName == 'edit') { // 编辑
     	 // 输出框
          layer.prompt({
          		// 表单元素的类型 0=文本框  1=密码框 2=文本域
                formType: 0,
                value: tr.username // 设置输入框的值
                }, function(value, index) {
                // 修改指定单元格的值
                // value表示输入的值
                obj.update({
                    username: value
                  });
                  // 关闭弹出层
                  	layer.close(index);
                  });
                }
 });

监听单元格编辑

监听单元格编辑之前要先打开单元格的编辑

edit 类型String，单元格编辑类型（默认不开启）目前只支持：text（输入框）

语法：table.on(‘edit(filter)’,callback)

filter 为容器 lay-filter 设定的值

单元格被编辑，且值发生改变时触发，回调函数返回一个 object 参数

obj.value 获取修改后的值
obj.filed 获取编辑的字段名
obj.data 获取所在行的所有相关数据

监听单元格编辑事件

表头设置edit属性，单元格编辑类型（默认不开启）目前只支持：text（输入框）

table.on('edit(test)', function(obj) {
	console.log(obj);
    // 获取修改后的值
    var value = obj.value;
   	// 得到当前修改的tr对象
    var data = obj.data;
    // 得到修改的字段名
    var field = obj.field;
    layer.msg("【ID:" + data.id + "】的" + field + "字段的值修改为：" + value);
});

数据表格重载

语法：table.reload(ID,options,deep)

参数 ID 即为基础参数id对应的值
参数 options 即为各项基础参数
参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false。注意：deep 参数为 layui 2.6.0 开始新增。

1.添加一个搜索框

<div class="demoTable">
   搜索ID：
   <div class="layui-inline">
    	<input class="layui-input" name="id" id="demoReload" autocomplete="off">
   </div>
   <button class="layui-btn" id="searchBtn">搜索</button>
</div>

2.获取一个jquery对象

var $ = layui.jquery; // 获取jquery对象

3.给指定元素绑定事件

$(document).on('click', '#searchBtn', function(data) {
	// 获取搜索文本框对象
	var sreach = $("#demoReload");
	// 调用数据表格的重载方法  table.reload(ID, options)
	table.reload('demo', {
		where: { // 设置需要传递的参数
			    id: sreach.val(),
			     name: "zhangsan"
			   },
	page: {
	// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
		curr: 1 // 从第一页开始
		}
	});
});

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107124.html

LayUI框架快速上手

LayUI概述

下载与结构

快速使用

布局

布局容器

栅格系统

列组合

列边距

列偏移

列嵌套

按钮

基础按钮

主题

尺寸

圆角

图标

导航

水平导航

垂直导航

侧边导航

主题

面包屑

选项卡

表格

表单

输入框

下拉选择框

复选框

开关

单选框

文本域

组装行内表单

表单方框风格

弹出层

两种使用方式

作为独立组件使用

使用模块化

基础参数

type-及时层类型

title-标题

content内容

area宽高

icon图标

btn按钮

time自动关闭所需毫秒

offset – 坐标

核心方法

原始核心方法

普通信息框

询问框

提示框

加载层

日期与时间选择

基础参数选项

elem绑定元素

type控件选择类型

format自定义格式

value初始值

lang语言

theme主题

calendar公历节日

分页

基础参数选项

elem绑定元素

count数据总数

limit每页显示条数

layout自定义排版

limits每页条数的选择

groups连续出现的页码个数

jump切换分页的回调

数据表格

三种初始化渲染方式

方法渲染

自动渲染

elem绑定元素

cols设置表头

url异步数据参数

page开启分页

toolbar开启表格头部工具栏