LayUI 使用

LayUI

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

其他UI框架：
Bootstrap，Element， EasyUI，LayUI 等等

LayUI使用

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

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 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.

一.栅格布局规则

采用 layui-row 来定义行，如：<div class="layui-row"></div>
采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
最后，在列（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" 按钮组,将多个按钮放在一起，可以缩小默认的按钮之间的间隙

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 参数

limits

Array

每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。注意：优先级低于 page 参数中的 limits 参数

[30,60,90]

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

初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。

详见初始排序

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 模块内部自动对其完成渲染，而无需你写初始的渲染方法。你需要关注的是以下三点：

带有 class="layui-table" 的 标签。

对标签设置属性 lay-data="" 用于配置一些基础参数

在

LayUI 使用

LayUI

LayUI使用

页面元素

布局

颜色

字体图标

动画

按钮(重点)

导航

水平导航

垂直导航

Tab选项卡

选项卡风格：

特殊属性：

事件：

进度条

属性：

事件：

面板

普通面板：

折叠面板：

属性:

事件

时间线

表单-form(重点)

样式：

特殊样式：

复选框：

单选按钮：

下拉框：

form表单特殊属性：

事件:

方法:

表格-table(重点)

表格基础参数

表头参数

异步数据接口参数

方式一:自动渲染