【知识分享】LayUI 的安装及使用

LayUI 的安装及使用

LayUI 的介绍

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

由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

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

官方文档：https://www.layui.com/doc/

LayUI 的特点

（1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。

（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。

下载与使用

在官网首页下载到 layui 的最新版。目录结构如下：
├─css // css目录
│ │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css // 核心样式文件
├─font // 字体图标目录
├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay // 模块核心目录
│ └─modules // 各模块组件
│─layui.js // 基础核心库
└─layui.all.js // 包含layui.js和所有模块的合并文件
获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js

基本的入门页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

还需要声明需要使用的模块和 回调函数。参照官方文档，选择自己想要的效果就行。
比如：
<script>
// 注意：导航依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;

//…
});
</script>

页面元素

布局

布局容器

固定宽度

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

完整宽度

可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应

栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了一套具备响应式能力的栅格系统。将容器进行了 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 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容

示例：

<h3>常规布局（以中型屏幕桌面为例）：</h3>
<div class="layui-row">
<div class="layui-col-md9" style="background-color: #00F7DE;">
你的内容 9/12
</div>
<div class="layui-col-md3" style="background-color: rosybrown;">
你的内容 3/12
</div>
</div>

响应式规则

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。

超小屏幕 (手机<768px)

小屏幕 (平板≥768px)

中等屏幕 (桌面≥992px)

大型屏幕(桌面≥1200px)

_.layui-container_的值

auto

750px

970px

1170px

标记

列对应类 * 为1-12的等分数值

layui-col-xs*

layui-col-sm*

layui-col-md*

layui-col-lg*

总列数

响应行为

始终按设定的比例水平排列

在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

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

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

<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8"
style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>

列边距

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

/ 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 /
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30

示例：

注：

layui-col-space：设置后不起作用主要是因为设置的是padding,也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。
间距一般不高于30px，如果超过30，建议使用列偏移。

列偏移

对列追加类似 layui-col-md-offset 的预设类，从而让列向右偏移。其中 号代表的是偏移占据的列数，可选中为 1 - 12。如：_layui-col-md-offset3_，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: rosybrown;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4"
style="background-color: cornflowerblue;">
偏移4列，从而在最右
</div>
</div>

注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

可以对栅格进行无穷层次的嵌套。在列元素（_layui-col-md*_）中插入行元素（_layui-row_），即可完成嵌套。

基本元素

按钮

用法

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

<button type="button" class="layui-btn">一个标准的按钮</button>
一个可跳转的按钮
<div class="layui-btn">一个按钮</div>

主题

名称

组合

原始

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"

示例：

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

尺寸

组合

大型

class="layui-btn layui-btn-lg"

默认

class="layui-btn"

小型

class="layui-btn layui-btn-sm"

迷你

class="layui-btn layui-btn-xs"

<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>

圆角

layui-btn-radius

图标

引入的资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
依赖加载模块
<script type="text/javascript">
// 注意：导航依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;

});
</script>
显示指定类型的导航

水平导航

垂直/侧边导航

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

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

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

<ul class="layui-nav layui-bg-move" >
…
</ul>

水平导航支持的其它背景主题有：_layui-bg-cyan_（藏青）、_layui-bg-molv_（墨绿）、_layui-bg-blue_（艳蓝）垂直导航支持的其它背景主题有：_layui-bg-cyan_（藏青）

面包屑

你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：

选项卡

导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。

依赖加载模块：element

实现步骤

引入的资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
依赖加载模块
<script type="text/javascript">
// 注意：选项卡依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;

});
</script>
加载HTML
<div class="layui-tab">
<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>

选项卡风格

默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card

带删除的选项卡

可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

表格

常规用法

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

基础属性

属性名

属性值

备注

lay-even

无

用于开启隔行背景，可与其它属性一起使用

lay-skin="属性值"

line （行边框风格） row （列边框风格） nob （无边框风格）

若使用默认风格不设置该属性即可

lay-size="属性值"

sm （小尺寸） lg （大尺寸）

若使用默认尺寸不设置该属性即可

你所需要的基础属性写在table标签上，例如：

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

表单

依赖加载模块：form

在一个容器中设定 class="layui-form" 来标识一个表单元素块
<form class="layui-form" action="">
</form>
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义_class="layui-form"_，form模块才能正常工作。
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>

输入框

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类

下拉选择框

<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>

属性_selected_可设定默认项
属性_disabled_开启禁用，select和option标签都支持

可以通过 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 来开启搜索匹配功能

<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>

复选框

属性_title_可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性_checked_可设定默认选中
属性_lay-skin_可设置复选框的风格（原始风格：lay-skin="primary"）
设置_value="1"_可自定义值，否则选中时返回的就是默认的on

开关

将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格

属性_checked_可设定默认开
属性_disabled_开启禁用
属性_lay-text_可自定义开关两种状态的文本（两种文本用 "|" 隔开）
设置_value="1"_可自定义值，否则选中时返回的就是默认的on

单选框

属性_title_可自定义文本
属性_disabled_开启禁用
设置_value="xxx"_可自定义值，否则选中时返回的就是默认的on

文本域

_class="layui-textarea"_：layui.css提供的通用CSS类

组装行内表单

_class="layui-inline"_：定义外层行内
_class="layui-input-inline"_：定义内层行内

忽略美化渲染

可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。

组件示例

弹出层

模块加载名称：_layer_，独立版本：layer.layui.com

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景

用前准备

调用方式

作为独立组件使用

如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入_jQuery_1.8以上的任意版本，并引入_layer.js_。

通过script标签引入layer.js后，直接用即可。

layui 模块化使用

如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入_layui.css_和_layui.js_

通过_layui.use('layer', callback)_加载模块

作为独立组件使用 layer

<script src="layer.js"></script>
<script>
layer.msg('hello');
</script>
在 layui 中使用 layer
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});

基础参数

type - 基本层类型
类型：Number，默认：0

可传入的值有：
0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）
title - 标题
类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值：
若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；
若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
若你不想显示标题栏，可以 title: false；
content - 内容
类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。
/ 信息框 /
layer.open({
type:0,
title:"系统消息",
// content可以传入任意的文本或html
content:"Hello"
});

/ 页面层 /
layer.open({
type:1,
title:"系统消息",
// content可以传入任意的文本或html
content:"<div style='height:100px;width:200px'>Hello</div>"
});

/ iframe /
layer.open({
type:2,
title:"系统消息",
// content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no']
content:"http://www.baidu.com"
// content:["http://www.baidu.com",'no']
});

/ tips层 /
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
area - 宽高
类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的。
当定义宽度时，你可以area: '500px'，高度仍然是自适应的。
当宽高都要定义时，你可以area: ['500px', '300px']。
icon - 图标
注：信息框和加载层的私有参数。

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。
// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开心。。', {icon: 5});
// eg3
layer.load(1); // 风格1的加载
示例
// eg1
layer.alert('很高兴见到你😊', {icon: 6});

// eg2
layer.msg('你愿意和我做朋友么？', {
time: 0, //不自动关闭
btn: ['当然愿意', '狠心拒绝'], // 按钮
yes: function(index){
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开心','快乐']
});
}
});

// eg3
layer.msg('这是常用的弹出层');

// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});

// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
// 关闭后的操作
layer.msg('(⊙o⊙)？');
});

日期与时间选择

模块加载名称：_laydate_，独立版本：http://www.layui.com/laydate/

layDate 包含了大量的更新，其中主要以：_年选择器_、_年月选择器_、_日期选择器_、_时间选择器_、_日期时间选择器_ 五种类型的选择方式。

快速使用

和 layer 一样，可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照实际需求来选择。

场景

用前准备

调用方式

layui 模块化使用

下载 layui 后，引入_layui.css_和_layui.js_即可

通过_layui.use('laydate', callback)_加载模块后，再调用方法

作为独立组件使用

去 layDate 独立版本官网下载组件包，引入 laydate.js 即可

直接调用方法使用

在layui模块中使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期与时间选择</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;

//执行一个laydate实例
laydate.render({
elem: '#date1' //指定元素
});
});
</script>
</html>

基础参数

elem - 绑定元素
类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
type - 控件选择类型
类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：
type可选值
名称
用途
year
年选择器
只提供年列表选择
month
年月选择器
只提供年、月选择
date
日期选择器
可选择：年、月、日。type默认值，一般可不填
time
时间选择器
只提供时、分、秒选择
datetime
日期时间选择器
可选择：年、月、日、时、分、秒
//年选择器
laydate.render({
elem: '#test'
,type: 'year'
});
//年月选择器
laydate.render({
elem: '#test'
,type: 'month'
});
//日期选择器
laydate.render({
elem: '#test'
//,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({
elem: '#test'
,type: 'time'
});
//日期时间选择器
laydate.render({
elem: '#test'
,type: 'datetime'
});
format - 自定义格式
类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
格式符
说明
yyyy
年份，至少四位数。如果不足四位，则前面补零
y
年份，不限制位数，即不管年份多少位，前面均不补零
MM
月份，至少两位数。如果不足两位，则前面补零。
M
月份，允许一位数。
dd
日期，至少两位数。如果不足两位，则前面补零。
d
日期，允许一位数。
HH
小时，至少两位数。如果不足两位，则前面补零。
H
小时，允许一位数。
mm
分钟，至少两位数。如果不足两位，则前面补零。
m
分钟，允许一位数。
ss
秒数，至少两位数。如果不足两位，则前面补零。
s
秒数，允许一位数。
通过上述不同的格式符组合成一段日期时间字符串，可任意排版。
//自定义日期格式
laydate.render({
elem: '#test'
,format: 'yyyy年MM月dd日' //可任意组合
});
value - 初始值
类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()
// 传入符合format格式的字符给初始值
laydate.render({
elem: '#test'
,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传入Date对象给初始值
laydate.render({
elem: '#test'
,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

分页

模块加载名称：_laypage_

快速使用

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use('laypage', function(){
var laypage = layui.laypage;

//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
</script>
</html>

基础参数

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

参数选项

说明

类型

默认值

elem

指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: 'id' 注意：这里不能加 # 号 2. elem: document.getElementById('id')

String/Object

count

数据总数。一般通过服务端得到

Number

limit

每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。

Number

limits

每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框

Array

[10, 20, 30, 40, 50]

curr

起始页。一般用于刷新类型的跳页以及HASH跳页。如： // 开启location.hash的记录 laypage.render({ elem: 'test1' , count: 500 , // 获取起始页 curr: location.hash.replace('#!fenye=', '') // 自定义hash值 ,hash: 'fenye' }); `

Number

groups

连续出现的页码个数

Number

自定义“上一页”的内容，支持传入普通文本和HTML

String

自定义“下一页”的内容，同上

String

first

自定义“首页”的内容，同上

String

last

自定义“尾页”的内容，同上

String

总页数值

layout

自定义排版。可选值有：_count_（总条目输区域）、_prev_（上一页区域）、_page_（分页区域）、_next_（下一页区域）、_limit_（条目选项区域）、_refresh_（页面刷新区域。注意：layui 2.3.0 新增）、_skip_（快捷跳页区域）

Array

['prev', 'page', 'next']

theme

自定义主题。支持传入：_颜色值_，或_任意普通字符_。如： 1. theme: '#c00' 2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题

String

hash

开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：_#!hash值={curr}_ 利用这个，可以在页面载入时就定位到指定页

String/Boolean

false

jump - 切换分页的回调

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

laypage.render({
elem: 'page'
,count: 100 //数据总数，从服务端得到
,groups:10 // 连续出现的页码个数
,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
,jump: function(obj, first){
// obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数

//首次不执行
if(!first){
//do something
}
}
});

数据表格

模块加载名称：_table_

快速使用

创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>_，然后通过 _table.render() 方法指定该容器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table数据表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

</body> <script src="layui/layui.js" type="text/javascript" ></script> <script type="text/javascript"> layui.use('table', function(){ var table = layui.table; // 第一个实例 table.render({ elem: '#demo' ,url: 'user.json' // 数据接口 ,cols: [[ // 表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177} ]] }); }); </script> </html> 数据接口 user.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" } ] } ##### 三种初始化渲染方式机制适用场景方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。自动渲染 HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 ##### 方法渲染 1. 将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个_选择器_

2. 渲染表格 layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（推荐id选择器） ,url: '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 模块内部自动对其完成渲染，而无需你写初始的渲染方法。 1) 带有 class="layui-table" 的标签。 2) 对标签设置属性 lay-data="" 用于配置一些基础参数 3) 在
标签中设置属性_lay-data=""_用于配置表头信息

ID 用户名性别

转换静态表格
页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。

昵称积分签名

贤心1 66 人生就像是一场修行a

执行用于转换表格的JS方法
layui.use('table', function(){
var table = layui.table;

// 转换静态表格
table.init('demo', {
height: 315 // 设置高度
// 支持所有基础参数
});

});
基础参数使用的场景
// 场景一：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: 'user.json'
});
// 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
……
// 更多场景：下述 options 即为含有基础参数项的对象 > table.init('filter', options); // 转化静态表格 > var tableObj = table.render({}); tableObj.reload(options); // 重载表格 ##### 开启分页 
// JS实现代码 layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（推荐id选择器） ,url: 'user.json' // 数据接口 ,height: 315 // 容器高度 ,page:true // 开启分页 ,cols: [[ // 设置表头 {field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); }); ##### 开启头部工具栏
 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container">  <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"> 编辑删除 </script> layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（推荐id选择器） ,url: 'user.json' // 数据接口 ,height: 315 // 容器高度 ,page:true // 开启分页 ,cols: [[ // 设置表头 {field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏 ]] ,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板 }); /** * 头工具栏事件 * 语法： table.on('toolbar(demo)', function(obj){ }); 注：demo表示选择器元素上设置的lay-filter属性值 */ table.on('toolbar(demo)', function(obj){ // obj.config.id 当前选择器的id属性值，即demo // 获取当前表格被选中的记录对象，返回数组 var checkStatus = table.checkStatus(obj.config.id); // obj.event 得到当前点击元素的事件名 switch(obj.event){ case 'getCheckData': // 获取被选中的记录的数组 var data = checkStatus.data; // 将数组数据解析成字符串 layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isAll': // checkStatus.isAll 判断记录是否被全选 layer.msg(checkStatus.isAll ? '全选': '未全选'); break; // 自定义头工具栏右侧图标 - 提示 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; }; }); /** * 监听行工具事件 */ table.on('tool(demo)', function(obj){ // 得到当前操作的tr的相关信息 var data = obj.data; if(obj.event === 'del'){ // 确认框 layer.confirm('真的删除行么', function(index){ // 删除指定tr obj.del(); // index 当前弹出层的下标，通过下标关闭弹出层 layer.close(index); }); } else if(obj.event === 'edit'){ // 输入框 layer.prompt({ // 表单元素的类型 0=文本框 1=密码框 2=文本域 formType: 0 ,value: data.username }, function(value, index){ // 修改指定单元格的值 // value表示输入的值 obj.update({ username: value }); // 关闭弹出层 layer.close(index); }); } }); }); ##### 开启单元格编辑

ID ID 用户名性别城市积分

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

// 监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});

});
数据表格的重载
<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>

layui.use('table', function(){ var table = layui.table; var $ = layui.jquery; // 获取jquery对象 // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（推荐id选择器） ,url: 'user.json' // 数据接口 ,page:true // 开启分页 ,cols: [[ // 设置表头 {type: 'checkbox', fixed: 'left'} // 设置复选框 ,{field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); // 给指定元素绑定事件 $(document).on('click', '#searchBtn', function(data) { // 获取搜索框对象 var demoReload = $('#demoReload'); table.reload('demo', { where: { // 设定异步数据接口的额外参数，任意设 id: demoReload.val() } ,page: { // 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选 curr: 1 // 重新从第 1 页开始 } }); // 只重载数据 }); });

【知识分享】LayUI 的安装及使用

LayUI 的安装及使用

LayUI 的介绍

LayUI 的特点

下载与使用

页面元素

布局

布局容器

固定宽度

完整宽度

栅格系统

栅格布局规则

响应式规则

列边距

列偏移

列嵌套

基本元素

按钮

用法

主题

尺寸

圆角

图标

导航

水平导航

垂直/侧边导航

导航主题

面包屑

选项卡

实现步骤

选项卡风格

带删除的选项卡

表格

常规用法

基础属性

表单

输入框

下拉选择框

复选框

开关

单选框

文本域

组装行内表单

忽略美化渲染

表单方框风格

组件示例

弹出层

使用场景

基础参数

日期与时间选择

快速使用

基础参数

分页

快速使用

基础参数

jump - 切换分页的回调

数据表格

快速使用

转换静态表格

基础参数使用的场景

数据表格的重载

爱编程的小叮当

引用和评论

零基础Java小白该怎么学？

Java8的新特性

Java11的新特性

Java5的新特性

Java9的新特性

Java13的新特性

Java7的新特性