表单
依赖加载模块:form
-
在一个容器中设定 class="layui-form" 来标识一个表单元素块
-
基本的行区块结构,它提供了响应式的支持。可以换成其他结构,但必须要在外层容器中定义class="layui-form",form模块才能正常工作。
原始表单元素区域
输入框
required:注册浏览器所规定的必填字段
lay-verify:注册form模块需要验证的类型
class="layui-input":layui.css提供的通用CSS类
下拉选择框
属性selected可设定默认项
属性disabled开启禁用,select和option标签都支持
- 可以通过 optgroup 标签给select分组
- 通过设定属性 lay-search 来开启搜索匹配功能
复选框
默认风格:
原始风格:
属性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类
组装行内表单
autocomplete="off" class="layui-input">
-
autocomplete="off" class="layui-input">
class="layui-inline":定义外层行内
class="layui-input-inline":定义内层行内
忽略美化渲染
可以对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格。
表单方框风格
通过追加 layui-form-pane 的class,来设定表单的方框风格。
组件示例
弹出层
模块加载名称:layer,独立版本:layer.layui.com
使用场景
由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
场景 | 用前准备 | 调用方式 |
---|---|---|
1. 作为独立组件使用 | 如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。 | 通过script标签引入layer.js后,直接用即可。 |
2. layui 模块化使用 | 如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js | 通过layui.use('layer', callback)加载模块 |
-
作为独立组件使用 layer
-
在 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:"Hello"
});/* 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 独立版,请按照实际需求来选择。
场景 | 用前准备 | 调用方式 |
---|---|---|
1. layui 模块化使用 | 下载 layui 后,引入layui.css和layui.js即可 | 通过layui.use('laydate', callback)加载模块后,再调用方法 |
2. 作为独立组件使用 | 去 layDate 独立版本官网下载组件包,引入 laydate.js 即可 | 直接调用方法使用 |
在layui模块中使用
日期与时间选择
基础参数
-
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 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。
分页
基础参数
通过核心方法:laypage.render(options) 来设置基础参数。
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 指向存放分页的容器,值可以是容器ID、DOM对象。如: 1. elem: 'id' 注意:这里不能加 # 号 2. elem: document.getElementById('id') | String/Object | - |
count | 数据总数。一般通过服务端得到 | Number | - |
limit | 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 | Number | 10 |
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 | 1 |
groups | 连续出现的页码个数 | Number | 5 |
prev | 自定义“上一页”的内容,支持传入普通文本和HTML | String | 上一页 |
next | 自定义“下一页”的内容,同上 | String | 下一页 |
first | 自定义“首页”的内容,同上 | String | 1 |
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.render() 方法指定该容器。
table数据表格
数据接口 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中指定表格元素,并简单地给表头加上自定义属性即可 |
方法渲染
-
将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个选择器
-
渲染表格
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 模块内部自动对其完成渲染,而无需你写初始的渲染方法。
- 带有 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: '性别'} ]] });
});
开启头部工具栏
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); });
});
数据表格的重载
搜索ID:
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 页开始 } }); // 只重载数据 });
});