关于java:知识分享LayUI-的安装及使用

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

由国人开发，16 年出厂的框架，其次要提供了很多难看、不便的款式，并且根本拿来即用，和 Bootstrap 有些类似，但该框架有个极大的益处就是定义了很多前后端交互的款式接口，如分页表格，只需在前端配置好接口，后端则依照定义好的接口规定返回数据，即可实现页面的展现，极大缩小了后端人员的开发成本。

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

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

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

<!– 你的 HTML 代码 –>

还须要申明须要应用的模块和 回调函数。参照官网文档，抉择本人想要的成果就行。
比方：
<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

图标

导航个别指页面引导性频道汇合，多以菜单的模式出现，可利用于头部和侧边。面包屑构造简略，反对自定义分隔符。

依赖加载模块：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 构造是齐全一样的，不同的是：

程度导航：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
<!– 引入好 layer.js 后，间接用即可 –>
<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>

// 第一个实例
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); // 重载表格

##### 开启分页

<!– HTML 代码 –>

// 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”>
<!– 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”>
编辑
删除
</script>

/**
* 头工具栏事件
* 语法：
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);
});

});

数据表格的重载

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 页开始
}
}); // 只重载数据
});
});

关于java:知识分享LayUI-的安装及使用

LayUI 的装置及应用

LayUI 的介绍

LayUI 的特点

下载与应用

页面元素

布局

布局容器

固定宽度

残缺宽度

栅格零碎

栅格布局规定

响应式规定

列边距

列偏移

列嵌套

根本元素

按钮

用法

主题

尺寸

圆角

图标

导航

程度导航

垂直 / 侧边导航

导航主题

面包屑

选项卡

实现步骤

选项卡格调

带删除的选项卡

表格

惯例用法

根底属性

表单

输入框

下拉抉择框

复选框

开关

单选框

文本域

组装行内表单

疏忽丑化渲染

表单方框格调

组件示例

弹出层

应用场景

根底参数

日期与工夫抉择

疾速应用

根底参数

分页

疾速应用

根底参数

jump – 切换分页的回调

数据表格

疾速应用

转换动态表格

根底参数应用的场景

数据表格的重载

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）