菜鸟的layui学习总结
菜鸟的layui学习总结
说明
更新时间:2020/10/23 14:04,更新完基本内容
本文现对layui进行一次总结与记录,主要基于官网进行学习,下面会偏向与实战,建议结合官网与本文一起学习,本文会持续更新,不断地扩充
注意:本文仅为记录学习轨迹,如有侵权,联系删除
一、概述
(1)layui说明
下载完之后是一个压缩包,解压后的文件目录如下
这里注意几个文件,lay文件夹、layui.all.js和layui.js,这几个是有关联的,首先看一下lay文件夹,里面有一个modules文件夹,里面就是封装好的一个个的模块
这些模块可以去官网看一下,基本上官网上面的内置模块都有,除了个别可能要收费的layui没有开源
接下来是layui.all.js和layui.js这两个js文件,除了文件大小的区别之外,还有一个很重要的区别,layui.all.js把所有的内置模块都包含在里面了,使用的时候不用自己再去引入模块,而layui.js是一个空壳,里面没有引入模块,需要使用的时候可以按需引入,下面可以先简单了解一下引入方式
(2)layui引用
引用的方式具体可以看官网
这里给出一个模块,css和js要根据自己的具体路径来
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--具体内容一-->
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
二、图标(icon)
简单瞄一眼官网上的图标
以实心图标为例,有 & #xe68f; 和 layui-icon-heart-fill 两种方式的使用,使用的方式如下,先引入layui-icon样式,后面再添加对应图标的标志即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--方式一-->
<h1>图标使用方式一</h1>
<span class="layui-icon">实心</span>
<div class="layui-icon">空心</div>
<h1 class="layui-icon">时间/历史</h1>
<span class="layui-icon">蓝牙</span>
<!--方式二-->
<h1>图标使用方式二</h1>
<span class="layui-icon layui-icon-heart-fill">实心</span>
<div class="layui-icon layui-icon-heart">空心</div>
<h1 class="layui-icon layui-icon-time">时间/历史</h1>
<span class="layui-icon layui-icon-bluetooth">蓝牙</span>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
二、按钮(button)
瞄一眼官网按钮说明
根据官网说明,用法那里是最简单的使用,当然它后面会给出各种样式,圆角、尺寸、图标等,只要按照它的描述引用即可,下面给出案例与讲解,注意,里面的具体样式要看着官网的说明来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--使用前先引入layui-btn样式,再根据需要引入各种圆角、图标等样式-->
<!--基本用法-->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a><br><br><br><hr>
<!--应用主题-->
<button type="button" class="layui-btn layui-btn-danger">警告</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用</button><br><br><br><hr>
<!--尺寸-->
<button class="layui-btn layui-btn-lg">大型</button>
<button class="layui-btn layui-btn-xs">迷你</button><br><br>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button><br><br><br><hr>
<!--圆角-->
<!--圆角需要再额外引入样式layui-btn-radius,在这个基础上再进行其他样式的引入-->
<button type="button" class="layui-btn layui-btn-radius ">默认</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭</button>
<button type="button" class="layui-btn layui-btn-radius layui-btn-dange">警告</button><br><br><br><hr>
<!--图标按钮-->
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn">
<i class="layui-icon"></i>上锁
</button>
<button type="button" class="layui-btn">
<i class="layui-icon"></i>下一页
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>
</button>
<br><br><br><hr>
<!--按钮组-->
<!--前面的每一个按钮都有自己的一段间距,而按钮组就是把一组按钮放在一起形成一个组,组里面按钮间没有间距-->
<!--用法也简单,在一个div标签里面,将一组的按钮放在同一个div里面,同时在该div标签上引入layui-btn-group样式即可-->
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<br><br><br><hr>
<!--按钮容器-->
<!--这个相当于在上面的按钮组上面加了个按钮间的间距-->
<div class="layui-btn-container">
<button type="button" class="layui-btn">按钮一</button>
<button type="button" class="layui-btn">按钮二</button>
<button type="button" class="layui-btn">按钮三</button>
</div>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
三、导航栏(nav)
同样的瞄一眼官网
导航栏主要用ul标签,里面引入layui-nav样式,除此之外还有垂直导航栏和侧边导航栏,只是在引入layui-nav的基础上再引入垂直样式或者侧边样式,除此之外还可以改变导航栏的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--水平导航栏-->
<h2>水平导航栏</h2>
<!--这里注意ul引入的样式layui-nav,li引入的样式layui-nav-item-->
<!--注意:通过设定layui-this来指向当前页面分类。-->
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<!--设定layui-this来指向当前页面分类-->
<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><br><br><br><br><hr>
<!--水平导航栏嵌入图片和徽章-->
<h2>水平导航栏嵌入图片和徽章</h2>
<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><br><br><br><br><hr>
<!--水平导航栏的其他样式-->
<!--水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)-->
<h2>水平导航栏的其他样式</h2>
<ul class="layui-nav layui-bg-blue" lay-filter="">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<!--设定layui-this来指向当前页面分类-->
<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><br><br><br><br><hr>
<!--垂直导航栏-->
<!--需要引入layui-nav-tree样式-->
<h2>垂直导航栏</h2>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</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>
<li class="layui-nav-item"><a href="#">大数据</a></li>
</ul>
<!--侧边导航栏-->
<!--需要引入layui-nav-tree layui-nav-side样式-->
<h2>侧边导航栏</h2>
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</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>
<li class="layui-nav-item"><a href="#">大数据</a></li>
</ul>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use(["element"],function () {
var element = layui.element;
})
</script>
</body>
</html>
注意:使用导航栏记得引入element模块才可以使用
四、选型卡(tab)
继续瞄一眼官网
详细可以官网,这里重点讲一下选项卡之间的监听事件,以及相关的点击事件,新增删除选型卡等,这里需要看一下layui的element模块,tab选型卡的事件都是由它进行控制的,由于比较多,这里已经把详细的使用以及代码的理解写在下面的html代码里面了,看一下会有不少收获
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
选型卡风格:默认(layui-tab)、简洁风格(layui-tab layui-tab-brief)、卡片风格(layui-tab layui-tab-card),例如卡片风格:
<div class="layui-tab layui-tab-card">
<ul>
......
</ul>
</div>
tab选型卡删除:你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除,例如:
<div class="layui-tab" lay-allowClose="true">
<ul>
......
</ul>
</div>
tab选项卡监听事件:根据官网给出的说明,有监听Tab选项卡切换事件、监听Tab监听选项卡删除事件、监听导航菜单的点击事件、监听折叠面板展开或收缩事件
(1)监听Tab选项卡切换事件:主要通过lay-filter属性进行监听, element.on('tab(filter值)', function(data){ 内容 })
html部分:
<div class="layui-nav" lay-filter="test1">
<ul>
......
</ul>
</div>
layui部分:
element.on('tab(test1)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
(2)监听Tab监听选项卡删除事件:主要通过lay-filter属性进行监听,element.on('tabDelete(filter值)', function(data){ 内容 })
html部分:
<div class="layui-nav" lay-filter="test1">
<ul>
......
</ul>
</div>
layui部分:
element.on('tabDelete(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
(3)监听导航菜单的点击事件:主要通过lay-filter属性进行监听,element.on('nav(filter值)', function(data){ 内容 })
html部分:
<div class="layui-nav" lay-filter="test1">
<ul>
......
</ul>
</div>
layui部分:
element.on('nav(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
(4)监听折叠面板展开或收缩事件:主要通过lay-filter属性进行监听,element.on('collapse(filter值)', function(data){ 内容 })
html部分:
<div class="layui-nav" lay-filter="test1">
<ul>
......
</ul>
</div>
layui部分:
element.on('collapse(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
其余功能:
(1)element.on(filter, callback);上面用到的选项卡监听
(2)element.tabAdd(filter, options):用于新增一个Tab选项
例如:
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
,id: '选项卡标题的lay-id属性值'
});
(3)element.tabDelete(filter, layid):用于删除指定的Tab选项
例如:
可以在对应的tab选项卡上面添加lay-id: <li lay-id="22">用户管理</li>
element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项
(4)element.tabChange(filter, layid):用于外部切换到指定的Tab项上
例如:
element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项
(5)element.tab(options):用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)
例如:
//HTML
<ul id="tabHeader">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div id="tabBody">
<div class="xxx">内容1</div>
<div class="xxx">内容2</div>
<div class="xxx">内容4</div>
</div>
//JavaScript
element.tab({
headerElem: '#tabHeader>li' //指定tab头元素项
,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
});
-->
<!--选型卡风格-->
<h2>默认风格</h2>
<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>
<h2>卡片风格</h2>
<div class="layui-tab layui-tab-card">
<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><br><br><br><hr>
<!--tab选型卡删除-->
<h2>删除卡片</h2>
<div class="layui-tab" lay-allowClose="true">
<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 class="layui-tab-item">6</div>
</div>
</div><br><br><br><hr>
<!--tab选项卡监听事件-->
<h2>tab选项卡监听事件</h2>
<div class="layui-tab" lay-allowClose="true" lay-filter = "test1">
<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.js-->
<script src="../../static/layui/layui.js"></script>
<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//监听Tab选项卡切换事件
element.on('tab(test1)',function (data) {
alert("选型卡下标(切换):"+data.index);
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//监听Tab监听选项卡删除事件
element.on('tabDelete(test1)', function(data){
alert("选项卡删除:"+data.index);
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//监听导航菜单的点击事件
element.on('nav(test1)', function(data){
alert("导航菜单的点击事件");
console.log(elem); //得到当前点击的DOM对象
});
});
</script>
</body>
</html>
相关样式:
相关属性
详细的属性建议直接看官网
五、进度条(progress)
继续瞄一眼官网
基本的使用官网已经有介绍,重点关注里面的几个样式和属性
layui-progress | 代表一个进度条 | 样式 |
layui-progress-bar | 代表进度条里面的进度 | 样式 |
layui-progress-big | 变大 | 样式 |
lay-percent | 代表进度值 | 属性 |
lay-showpercent=“true” | 是否显示进度值 | 属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
默认进度条:外层div需要引入layui-progress,里面div需要引入与layui-progress-bar,并且通过lay-percent设置进度,可以百分比可以像素
例如:
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
显示文本进度条:对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示,支持:普通数字、百分数、分数
例如:
<div class="layui-progress" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div><br><br>
进度条颜色与尺寸:颜色可以通过layui的颜色库进行选择,例如红色:layui-bg-red,大尺寸进度:layui-progress-big
例如:
<h2>进度条颜色</h2>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
</div><br><br>
<h2>进度条尺寸</h2>
<div class="layui-progress">
<div class="layui-progress-bar layui-progress-big" lay-percent="20%"></div>
</div><br><br><br><hr>
-->
<!--默认进度条-->
<h2>进度条(默认)</h2>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div><br><br><br><hr>
<!--显示文本进度条-->
<h2>显示文本进度条</h2>
<div class="layui-progress" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div><br><br>
<div class="layui-progress" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div><br><br>
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div><br><br>
<!--颜色与尺寸-->
<h2>进度条颜色</h2>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
</div><br><br>
<h2>进度条尺寸</h2>
<div class="layui-progress">
<div class="layui-progress-bar layui-progress-big" lay-percent="20%"></div>
</div><br><br><br><hr>
<!--动态进度条-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>动态改变进度</legend>
</fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
<button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
//注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
layui.use('element', function(){
var $ = layui.jquery;//获取js
var element = layui.element;//获取layui
//触发事件
var active = {
setPercent: function(){
//设置50%进度
element.progress('demo', '50%')
}
,loading: function(othis){
var DISABLED = 'layui-btn-disabled';
if(othis.hasClass(DISABLED)) return;
//模拟loading
var n = 0, timer = setInterval(function(){
n = n + Math.random()*10|0;
if(n>100){
n = 100;
clearInterval(timer);
othis.removeClass(DISABLED);
}
element.progress('demo', n+'%');
}, 300+Math.random()*1000);
othis.addClass(DISABLED);
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>
六、徽章(dot)
这个可以简单理解为一个小圆点,官网的解释如下
使用起来也十分简单,这里直接给案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--小圆点,通过 layui-badge-dot 来定义,里面不能加文字-->
<h2>小圆点,通过 layui-badge-dot 来定义,里面不能加文字</h2>
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
<br><br><br><br><hr>
<!--椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式-->
<h2>椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式</h2>
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
<br><br><br><br><hr>
<!--边框体,通过 layui-badge-rim 来定义-->
<h2>边框体,通过 layui-badge-rim 来定义</h2>
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
<br><br><br><br><hr>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
七、面板(card)
面板有卡片面板,这个不用引入element模块,但是像折叠面板、手风琴面板就需要引入element模块,看一下官网的定义
这个的使用也间单,直接上案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等
卡片面板:默认卡片面板需要引入layui-card样式,该面板不需要引入element模块,如果你的网页采用的是默认的白色背景,不建议使用卡片面板
例如:
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
折叠面板:可以点击折叠面板,节省了空间,需要引入element空间
例如:
<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 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>
<script>
//注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
-->
<!--卡片面板-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>卡片面板</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
结合 layui 的栅格系统<br>
轻松实现响应式布局
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">标题</div>
<div class="layui-card-body">
内容
</div>
</div>
</div>
</div>
</div>
<!--折叠面板-->
<h2>折叠面板</h2>
<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 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 src="../../static/layui/layui.js"></script>
<script>
//注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>
八、颜色选择器(colorpicker)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
注意颜色选择器需要用到:colorpicker模块
颜色选择器:它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中*拖拽去选择你中意的颜色,模块加载名称:colorpicker
(1)常规使用:html部分只需要随便一个标签,给个id,然后全部交给colorpicker模块控制
例如:
<div id="test1"></div>
colorpicker.render({
elem: '#test1' //绑定元素
});
(2)表单赋值:将选择的颜色回调给表单进行提交,实现的方式也简单,通过颜色选择器的回调,将选中的颜色通过jq赋值给表单即可
例如:
即表单后面加个选择器,标好id
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test3-form-input">
<div id="test3"></div>
//表单赋值
colorpicker.render({
elem:"#test3",//绑定元素
//函数回调,表单赋值
done:function (color) {
$("#test3-form-input").val(color)
}
});
这里给出colorpicker模块的详细参数:
(1)elem 指向容器选择器 string/object -
(2)color 默认颜色,不管你是使用 hex、rgb 还是 rgba 的格式输入,最终会以指定的格式显示。 string -
(3)format 颜色显示/输入格式,可选值: hex、rgb
若在 rgb 格式下开启了透明度,格式会自动变成 rgba。在没有输入颜色的前提下,组件会默认为 #000 也就是黑色。 string hex(即 16 进制色值)
(4)alpha 是否开启透明度,若不开启,则不会显示透明框。开启了透明度选项时,当你的默认颜色为 hex 或 rgb 格式,组件会默认加上值为 1 的透明度。相同的,当你没有开启透明度,却以 rgba 格式设置默认颜色时,组件会默认没有透明度。
注意:该参数必须配合 rgba 颜色值使用 boolean false
(5)predefine 预定义颜色是否开启 boolean false
(6)colors 预定义颜色,此参数需配合 predefine: true 使用。 Array 此处列举一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
(7)size 下拉框大小,可以选择:lg、sm、xs。 string -
-->
<!--常规使用-->
<h2>常规使用</h2>
<div id="test1"></div>
<div id="test2"></div>
<!--表单赋值-->
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test3-form-input">
</div>
<div id="test3"></div>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use('colorpicker', function(){
//获取该模块
var colorpicker = layui.colorpicker;
//获取jquery模块
var $ = layui.jquery;
//常规使用
colorpicker.render({
elem: '#test1', //绑定元素
//回调选中的颜色
done: function(color){
alert('选择了:'+ color, this.elem);
}
});
colorpicker.render({
elem: '#test2', //绑定元素
color: '#2ec770' //设置默认色
});
//表单赋值
colorpicker.render({
elem:"#test3",//绑定元素
//函数回调,表单赋值
done:function (color) {
$("#test3-form-input").val(color)
}
});
});
</script>
</body>
</html>
九、轮播(carousel)
轮播算是比较常用的一个,具体使用还是得看官网
下面是它的一些简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
注意:轮播需要用到carousel模块
简单轮播:常规的左右轮播的形式,使用的方式也简单
例如:
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
注意:参数选择可以参考官网,下面列出一些参数
(1)elem 指向容器选择器,如:elem: '#id'。也可以是DOM对象 string/object 无
(2)width 设定轮播容器宽度,支持像素和百分比 string '600px'
(3)height 设定轮播容器高度,支持像素和百分比 string '280px'
(4)full 是否全屏轮播 boolean false
(5)anim 轮播切换动画方式,string 'default',可选值为:
default(左右切换)
updown(上下切换)
fade(渐隐渐显切换)
(6)autoplay 是否自动切换 boolean true
(7)interval 自动切换的时间间隔,单位:ms(毫秒),不能低于800 number 3000
(8)index 初始开始的条目索引 number 0
(9)arrow 切换箭头默认显示状态,string 'hover',可选值为:
hover(悬停显示)
always(始终显示)
none(始终不显示)
(10)indicator 指示器位置,可选值为:
inside(容器内部)
outside(容器外部)
none(不显示)
注意:如果设定了 anim:'updown',该参数将无效 string 'inside'
(11)trigger 指示器的触发事件 string 'click'
-->
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item>
<div><img src="../../static/layui/img/1.jpg" height="400px"></div>
<div><img src="../../static/layui/img/2.jpg" height="400px"></div>
<div><img src="../../static/layui/img/3.jpg" height="400px"></div>
<div><img src="../../static/layui/img/4.jpg" height="400px"></div>
</div>
</div>
<!-- div中可以是任意内容,如:<img src=""> -->
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['carousel'],function () {
//获取轮播模块
let carousel = layui.carousel;
//常规轮播
carousel.render({
elem: '#test1',
height:'400px',
width: '100%', //设置容器宽度
arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
alert(obj.index)
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
})
//建造实例
</script>
</body>
</html>
十、时间与日期选择器(laydate)
看一下官网的定义
官网给了很多参数,可以根据实际进行设置,下面代码给了大部分的参数说明以及使用,详细的可以看官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
时间与日期选择器:这个是开发过程中经常使用到的组件,有必要重点讲一下,它是使用方式也十分简单,重点是laydate模块的渲染
例如:
HTML:
<input type="text" id="test1">
js:
laydate.render({
elem:"#test1",//指定元素
//这里也可以加上其他参数进行数据渲染
});
注意:重点是js里面渲染的详细参数,下面开始介绍各种参数的使用
详细参数说明:
(1)type - 控件选择类型,类型:String,默认值:date,用于单独提供不同的选择器类型,可选值如下表:
year 年选择器 只提供年列表选择
month 年月选择器 只提供年、月选择
date 日期选择器 可选择:年、月、日。type默认值,一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择:年、月、日、时、分、秒
(2)range - 开启左右面板范围选择,类型:Boolean/String,默认值:false,如果设置 true,将默认采用 “ - ” 分割。
(3)format-自定义格式,类型:String,默认值:yyyy-MM-dd,参数如下:
yyyy 年份,至少四位数。如果不足四位,则前面补零
y 年份,不限制位数,即不管年份多少位,前面均不补零
MM 月份,至少两位数。如果不足两位,则前面补零。
M 月份,允许一位数。
dd 日期,至少两位数。如果不足两位,则前面补零。
d 日期,允许一位数。
HH 小时,至少两位数。如果不足两位,则前面补零。
H 小时,允许一位数。
mm 分钟,至少两位数。如果不足两位,则前面补零。
m 分钟,允许一位数。
ss 秒数,至少两位数。如果不足两位,则前面补零。
s 秒数,允许一位数。
通过上述不同的格式符组合成一段日期时间字符串,可任意排版
(4)value - 初始值,可以通过new Date()设置初始值
(5)min/max - 最小/大范围内的日期时间值,类型:string,默认值:min: '1900-1-1'、max: '2099-12-31'
设定有限范围内的日期或时间值,不在范围内的将不可选中。这两个参数的赋值非常灵活,主要有以下几种情况:
1. 如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式
2. 如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
3. 如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
(6)position - 定位方式,类型:String,默认值:absolute,
用于设定控件的定位方式,有以下三种可选值:
position 可选值 说明
abolute 绝对定位,始终吸附在绑定元素周围。默认值
fixed 固定定位,初始吸附在绑定元素周围,不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static 静态定位,控件将直接嵌套在指定容器中。
注意:请勿与 show 参数的概念搞混淆。show为 true 时,控件仍然是采用绝对或固定定位。而这里是直接嵌套显示
(7)lang - 语言,类型:String,默认值:cn,我们内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。这里并没有开放自定义文字,是为了避免繁琐的配置
(8)theme - 主题,类型:String,默认值:default
我们内置了多种主题,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
(9)calendar - 是否显示公历节日,类型:Boolean,默认值:false
我们内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示。
......
还有一些其他的参数,可以直接去官网看一下
-->
<!--type参数-->
<div>
<span>type参数</span>
日期:<input type="text" id="test1">
</div><br><br><br><hr>
<!--range参数-->
<div>
<span>range参数</span>
日期:<input type="text" id="test2">
</div><br><br><br><hr>
<!--format参数-->
<div>
<span>format参数</span>
日期:<input type="text" id="test3">
</div><br><br><br><hr>
<!--value参数-->
<div>
<span>value参数</span>
日期:<input type="text" id="test4">
</div><br><br><br><hr>
<!--min/max参数-->
<div>
<span>min/max参数</span>
时间有效范围设定在: 上午九点半到下午五点半 日期:<input type="text" id="test5">
</div><br><br><br><hr>
<div>
<span>min/max参数</span>
日期时间有效范围的设定 日期:<input type="text" id="test6">
</div><br><br><br><hr>
<div>
<span>min/max参数</span>
日期有效范围限定在:过去一周到未来一周 日期:<input type="text" id="test7">
</div><br><br><br><hr>
<!--position参数-->
<div>
<span>position参数</span>
日期:<input type="text" id="test8">
</div><br><br><br><hr>
<!--lang参数-->
<div>
<span>lang参数</span>
日期:<input type="text" id="test9">
</div><br><br><br><hr>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['laydate'],function () {
let laydate = layui.laydate;
//type参数
laydate.render({
elem:"#test1",//指定元素
type:'year',//年选择器
//这里也可以加上其他参数进行数据渲染
});
//range参数
laydate.render({
elem:"#test2",
// range:true,
range:"~",//或 range: '~' 来自定义分割字符
});
//format参数
laydate.render({
elem:"#test3",
format:"yyyy-MM-dd HH:mm:ss"
});
//value参数
laydate.render({
elem:"#test4",
value:new Date(),
});
//min/max参数
laydate.render({
elem: '#test5'
,type: 'time'
//时间有效范围设定在: 上午九点半到下午五点半
,min: '09:30:00'
,max: '17:30:00'
});
laydate.render({
elem: '#test6'
,type: 'datetime'
//日期时间有效范围的设定:
,min: '2017-8-11 12:30:00'
,max: '2017-8-18 12:30:00'
});
laydate.render({
elem: '#test7'
//日期有效范围限定在:过去一周到未来一周
,min: -7 //7天前
,max: 7 //7天后
});
//position参数
laydate.render({
elem: '#test8',
position:"fixed",
});
//lang参数
laydate.render({
elem: '#test9',
lang:"en"
});
})
</script>
</body>
</html>
十一、表单元素
表单元素包括输入框、密码框、下拉框等表单提交相关的元素,这个是比较重要的一块。先把官网地址丢在这里,需要时可以看一下
(1)输入框与密码框
这里把这两个放在一起讲,因为使用方式基本一致。
layui的表单格式如下:
<!--
(1)layui表单form格式:
<form class="layui-form" action="">
<div class="layui-form-item">
......
</div>
<div class="layui-form-item">
......
</div>
<div class="layui-form-item">
......
</div
</form>
注意样式的引入,layui-form和layui-form-item
(2)form里面的表单元素:
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
......
</div
注意:上面展示了两种样式layui-input-block和layui-input-inline
-->
注意样式的引入,layui-form和layui-form-item,如果表单中有用到layui的下拉控件这样的需要重新渲染的组件的话,需要加入layui-form样式,如果只有输入框密码框这样的话可以不加
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--
(1)layui表单form格式:
<form class="layui-form" action="">
<div class="layui-form-item">
......
</div>
<div class="layui-form-item">
......
</div>
<div class="layui-form-item">
......
</div
</form>
(2)form里面的表单元素:
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
......
</div
注意:上面展示了两种样式layui-input-block和layui-input-inline
-->
<form class="layui-form" action="">
<!--行内表单-->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<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-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<!--组装行内表单-->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户密码</label>
<div class="layui-input-inline">
<input type="password" name="phone" lay-verify="required|phone" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</form>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
注意两种样式layui-input-block和layui-input-inline的展现形式
(2)下拉框
下拉框的使用跟上面的输入框和密码框有一点区别,下拉框需要引入layui-form样式,同时需要form模块的引入
<!--下拉框:需要引入form模块-->
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1" selected>上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<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="0">北京</option>
<option value="1">上海</option>
<option value="2" selected>广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
</form>
(3)单选框、开关和复选框
这两个的使用需要引入的模块跟下拉框的一样,下面直接给出代码,注意form模块的引入
<!--单选框、开关和复选框-->
<form class="layui-form">
<!--复选框tyep = checkbox-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<!--开关type也是checkbox,但这里需要引入lay-skin属性-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<!--单选框type = radio-->
<div class="layui-form-item">
<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>
<br><br><br><br><hr>
(3)文本域
<!--文本域-->
<form class="layui-form">
<!--注意:这里注意引入layui-form-text样式-->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
十二、表单对象form模块
form是layui提供的众多模块中的一种,也是很重要的模块之一,下面直接进入官网进行查看
(1)更新渲染
有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。
下面直接给出例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--更新渲染-->
<form class="layui-form" lay-filter="test1">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="aihao" lay-filter="aihao" id="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="addSelect">下拉框增加睡觉选项</button>
</div>
</div>
</form>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['form'],function () {
//获取form模块
var form = layui.form;
//获取js
var $ = layui.jquery;
$('#addSelect').on('click',function () {
$("#aihao").append("<option value='4'>" + '睡觉' + "</option>");
alert("添加了睡觉下拉选项")
//如果不用form模块的render()进行数据的重新更新渲染,新添加的选项不会显示在下拉列表那里
// form.render(); //更新全部
form.render('select', 'test1'); //更新 lay-filter="test1" 所在容器内的全部 select 状态
})
})
</script>
</body>
</html>
这里有个重点,form标签那里必须引入layui-form样式,同时需要引入lay-filter属性,这样才能根据lay-filter去刷新对应的组件
(2)预设元素属性
具体可以去看看官网的说法,我的理解是在input标签中的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性,他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。下面是官网的给出的目前支持的属性
这些属性下面可能会用到,这里先简单了解一下。
(3)事件监听
语法:form.on(‘event(过滤器值)’, callback);
form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下:
一般来讲,监听只需要一个lay-filter属性即可,注意单选框、复选框和开关等的监听事件,已经它们的lay-filter的添加,下面直接给案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--事件监听-->
<form class="layui-form" lay-filter="test2"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<!--监听下拉框:select-->
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">睡觉</option>
</select>
</div>
</div>
<!--监听复选框:checkbox-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" value="写作" title="写作" lay-filter="fxk">
<input type="checkbox" name="like[read]" value="阅读" title="阅读" lay-filter="fxk">
</div>
</div>
<!--监听开关:switch-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch" value="开关的值" lay-text="开|关" lay-filter="kg">
</div>
</div>
<!--监听单选框:radio -->
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男" lay-filter="sex">
<input type="radio" name="sex" value="1" title="女" checked lay-filter="sex">
</div>
</div>
<!--监听提交事件:submit-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['form'],function () {
//获取form模块
var form = layui.form;
//获取js
var $ = layui.jquery;
/**事件监听**/
//监听下拉框:select
form.on('select(aihao)',function (data) {
alert(data.value);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//监听复选框:checkbox
form.on('checkbox(fxk)',function (data) {
alert(data.value);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//监听开关:switch
form.on('switch(kg)',function (data) {
alert(data.value);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//监听单选框:radio
form.on('radio(sex)',function (data) {
alert(data.value);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//监听提交事件:submit
form.on('submit(tj)',function (data) {
console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
})
</script>
</body>
</html>
(4)表单赋值/取值
这个适用于编辑的情况,它官网给的很笼统,只是简单提了一下,实际上这个还是很重要的一个点
注意:官网给的目前无法给复选框赋初值,只能通过js进行循环遍历赋初值
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--表单赋值/取值-->
<form class="layui-form" lay-filter="test3"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<!--输入框-->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<!--下拉框:select-->
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<select name="hobby" id="hobby" lay-filter="hobby">
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">睡觉</option>
</select>
</div>
</div>
<!--复选框:checkbox-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="hobby2" value="写作" title="写作" lay-filter="hobby2">
<input type="checkbox" name="hobby2" value="阅读" title="阅读" lay-filter="hobby2">
<input type="checkbox" name="hobby2" value="游戏" title="游戏" lay-filter="hobby2">
</div>
</div>
<!--开关:switch-->
<div class="layui-form-item">
<label class="layui-form-label">是否</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch" value="是否的值" lay-text="开|关" name="yesno" lay-filter="yesno">
</div>
</div>
<!--单选框:radio -->
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男" lay-filter="xb">
<input type="radio" name="sex" value="1" title="女" checked lay-filter="xb">
</div>
</div>
<!--提交事件:submit-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" class="layui-btn" id="getValue">获取表单的值</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['form'],function () {
//获取form模块
var form = layui.form;
//获取js
var $ = layui.jquery;
/**表单赋值/取值**/
//给表单赋值(除了复选框)
form.val("test3", { //test3 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"username": "贤心" // "name": "value"
,"hobby":1
// ,"hobby2":[true]
,"yesno":"yes"
,"xb":1
,"sex": "女"
});
//复选框的赋初值
var hobby="写作,游戏";
var hobbys=hobby.split(",");
var hobbyElem=$("[name='hobby2']");
$.each(hobbys,function(i,str){
alert(str);
$.each(hobbyElem,function(j,item){
var jdom=$(item);// 把dom--转jdom
if(jdom.val()==str){
//jdom.attr({"checked",true});
jdom.attr("checked","checked");
}
})
});
form.render();
//获取表单区域所有值
$("#getValue").on("click",function () {
var data1 = form.val("test3");
alert(data1.username)
console.log(data1)
});
})
</script>
</body>
</html>
注意复选框、单选框和开关的name的取值
(4)表单验证
表单验证是通过lay-verify属性进行校验的,同时注意在提交按钮上添加lay-submit属性,不然无法校验,下面給代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<!--表单验证-->
<form class="layui-form" lay-filter="test4"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<!--用户名-->
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<!--required:表示非空校验-->
<input type="text" name="username2" id="username2" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<!--电话自定义校验-->
<div class="layui-form-item">
<label class="layui-form-label">密码(自定义校验规则)</label>
<div class="layui-input-block">
<input type="text" name="pass" id="pass" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="pass">
</div>
</div>
<!--身份证-->
<div class="layui-form-item">
<label class="layui-form-label">身份证</label>
<div class="layui-input-block">
<input type="text" name="idcard" id="idcard" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|identity">
</div>
</div>
<!--邮箱-->
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" id="email" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|email">
</div>
</div>
<!--提交事件:submit-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['form'],function () {
//获取form模块
var form = layui.form;
//获取js
var $ = layui.jquery;
/**表单校验**/
//自定义校验规则
form.verify({
//我们既支持上述函数式的方式,也支持下述数组的形式
//数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
pass: [
/^[\S]{6,12}$/
,'密码必须6到12位,且不能出现空格'
]
});
})
</script>
</body>
</html>
下面是内置的校验规则
注意,表单校验除了可以用自带的校验规则之外,还可以自定义校验规则,具体操作看上面的代码
十三、弹出层
弹出层也是一个应该掌握的一个重要的模块,layui提供了很多种形式的弹出层,这里我将这些分成两类,一个是简单的窗口弹出,另一种是复杂的弹出层,先给出官网,建议去官网看看。
(1)简单的弹出层
注意:弹出层的使用需要引入layer模块
就跟上面图中的一样,共有7种弹窗,上诉代码中几乎把这7种弹窗的属性都写在了上面,实际如果用到的话可以直接去官网查看相应的参数即可,下面简单描述一下这7种弹窗。
alert
这个是最简单的一种,直接上代码
<button type="button" class="layui-btn" id="btn1">alert</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn1').on('click',function () {
//正常提示
// layer.alert("只想简单的提示");
// 有图标的提示,icon取值1:7,具体可以看官网
layer.alert('加了个图标', {icon: 1});
// //提示点击确定后有回调方法
// layer.alert('有了回调',{icon: 1}, function(index){
// //do something
// alert("回调方法:"+index);
// layer.close(index);
// });
});
</script>
还可以设置点击确定后的回调事件。
confirm
这个用于需要用户判断是与否的情况,比如是否删除该用户等
<button type="button" class="layui-btn" id="btn2">confirm</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn2').on('click',function () {
// //例子1,icon取值可以看官网,1到7
layer.confirm('确定删除??', {icon: 3, title:'提示'}, function(index){
//do something
layer.close(index);
});
//例子2
// layer.confirm('is not?', function(index){
// //do something
//
// layer.close(index);
// });
});
</script>
prompt
<button type="button" class="layui-btn" id="btn3">prompt</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn3').on('click',function () {
// //prompt层新定制的成员如下
// {
// formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
// value: '', //初始时的值,默认空字符
// maxlength: 140, //可输入文本的最大长度,默认500
// }
// 例子1
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
// // //例子2
// layer.prompt({
// formType: 2,
// value: '初始值',
// title: '请输入值',
// area: ['800px', '350px'] //自定义文本域宽高
// }, function(value, index, elem){
// alert(value); //得到value
// layer.close(index);
// });
});
</script>
这种可以自定义宽高等参数
tab
这种个人觉得用得比较少,可以了解一下
<button type="button" class="layui-btn" id="btn4">tab</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn4').on('click',function () {
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
});
</script>
photos
这个是图片的查看,也是常见的内容,这里它的使用有点特殊,这里用到json进行图片的信息的存储,json格式如下:
{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号,默认0
"data": [ //相册包含的图片,数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "", //原图地址
"thumb": "" //缩略图地址
}
]
}
使用get或post等请求获取得到这样的json数据,然后进行渲染
<button type="button" class="layui-btn" id="btn5">photos</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn5').on('click',function () {
$.getJSON('json/imgs.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
});
});
</script>
msg
<button type="button" class="layui-btn" id="btn6">msg</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$("#btn6").on('click',function () {
//eg1
//layer.msg('只想弱弱提示');
// //eg2
//layer.msg('有表情地提示', {icon: 6});
// //eg3
// layer.msg('关闭后想做些什么', function(){
// //do something
// });
// //eg
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
alert("你好啊")
//do something
});
});
</script>
tips
<button type="button" class="layui-btn" id="btn7">tips</button>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer'],function () {
let layer = layui.layer;
let $ = layui.jquery;
$('#btn7').on('click',function () {
//eg1
//layer.tips('只想提示地精准些', '#btn7');
// //eg 2
// var that = this;
// layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
// //eg 3
layer.tips('在上面', '#btn6', {
tips: 1
});
});
</script>
这个可以根据id将提示加到某一个元素上面
上述的所有弹窗都可以在官网找到,而且官网上有详细的参数说明,使用的时候建议根据官网参数进行设置
(2)复杂的弹窗层
这个主要用到的语法是
layer.open({type: 1});
//注意open里面有很多的参数可以设置,用来构成一个复杂弹窗
这里先把整体的代码抛出来,然后下面会有详细的讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<button type="button" class="layui-btn" id="btn0">type=0</button>
<button type="button" class="layui-btn" id="btn1">type=1</button>
<button type="button" class="layui-btn" id="btn2">type=2</button>
<button type="button" class="layui-btn" id="btn3">type=3</button>
<button type="button" class="layui-btn" id="btn4">type=4</button>
<div id="test1" hidden>
<!--事件监听-->
<form class="layui-form" lay-filter="test2"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<!--监听下拉框:select-->
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">睡觉</option>
</select>
</div>
</div>
<!--监听复选框:checkbox-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" value="写作" title="写作" lay-filter="fxk">
<input type="checkbox" name="like[read]" value="阅读" title="阅读" lay-filter="fxk">
</div>
</div>
<!--监听开关:switch-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch" value="开关的值" lay-text="开|关" lay-filter="kg">
</div>
</div>
<!--监听单选框:radio -->
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男" lay-filter="sex">
<input type="radio" name="sex" value="1" title="女" checked lay-filter="sex">
</div>
</div>
<!--监听提交事件:submit-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</div>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function () {
let layer = layui.layer;
let form = layui.form;
let $ = layui.jquery;
/**type=0**/
$('#btn0').on('click', function () {
//正常提示
layer.open({
type: 0,//类型,0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
content: "<h2 style='color: red'>123</h2>",//可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
// skin: 'layui-layer-molv',//内置皮肤layui-layer-lan和layui-layer-molv
// area: ['500px', '300px'],//自定义宽高
icon: 1,//图标,只对type = 0有效
btn: ['按钮1', "按钮2", "按钮3"],//按钮以及按钮回调事件
yes: function (index, layero) {
//按钮【按钮一】的回调
layer.alert("按钮1");
// return true;
},
btn2: function (index, layero) {
//按钮【按钮二】的回调
layer.alert("按钮2");
//return false;// 开启该代码可禁止点击该按钮关闭
},
btn3: function (index, layero) {
//按钮【按钮三】的回调
layer.alert("按钮3");
//return false 开启该代码可禁止点击该按钮关闭
},
cancel: function () {
//右上角关闭回调
alert("弹窗已经关闭");
//return false 开启该代码可禁止点击该按钮关闭
},
btnAlign: 'c',//上面按钮居中,l:居左,r:居右,c:居中
closeBtn:2,//右上角的关闭图标:x,0:关闭,1或者2:开启
shade:0.3,//遮罩,数字表示透明度,1是全黑,0是关闭
id:1001,//该弹窗的唯一标志
//maxmin:1,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed:true,//即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
scrollbar:true,//是否允许出现滚动条
maxWidth: "500px",//最大宽度,只有当area: 'auto'时,maxWidth的设定才有效。
maxHeight:"200px",//最大高度,只有当高度自适应时,maxHeight的设定才有效。
success: function(layero, index){//层弹出后的成功回调方法
alert("弹窗成功弹出");
console.log(layero, index);
}
});
});
/**type=1**/
$('#btn1').on('click', function () {
layer.open({
type:1,
content:$('#test1') ,
area:["500px","300px"],
icon:2,
maxmin: true//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
});
});
/**type=2**/
$('#btn2').on('click', function () {
layer.open({
type:2,
content: "01_layui_icon.html",
maxmin: true//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
});
});
/**type=3**/
$('#btn3').on('click', function () {
layer.open({
type:3,
content:"加载中..."
});
});
/**type=4**/
$('#btn4').on('click', function () {
layer.open({
type:4,
content: ['这是内容', '#btn4'] //数组第二项即吸附元素选择器或者DOM
});
});
})
</script>
</body>
</html>
下面先简单说一下一些必要的参数
type
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外),默认0
title
表示标题
content
框里面的就是对应的内容,不同的type对应不同的内容
skin
这是其中的一种样式
are
可以控制弹窗的区域大小
icon
btn
btnAlign
shade
scrollbar
success
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
elem | String/DOM | 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 | "#demo" |
cols | Array | 设置表头。值是一个二维数组。方法渲染方式必填 | 详见表头参数 |
url(等) | - | 异步数据接口相关参数。其中 url 参数为必填项 | 详见异步接口 |
toolbar | String/DOM/Boolean | 开启表格头部工具栏区域,该参数支持四种类型值:
注意:
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 参数 |
30 |
limits | Array | 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 |
[30,60,90] |
loading | 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 | 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 | 详见初始排序 |
id | String | 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。 |
test |
skin(等) | - | 设定表格各种外观、尺寸等 | 详见表格风格 |
十四、表格数据(table)
table模块绝对是一个要掌握的重点知识,这里用官网推荐的渲染方式(方法渲染)进行数据渲染,先来看一下简单的例子
下面用到代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test1"></table>
<script type="text/html" id="titleTpl">
{{# if(d.sex == '男'){ }}
<a href="#" class="layui-table-link">雄</a>
{{# } else { }}
<a href="#" class="layui-table-link">雌</a>
{{# } }}
</script>
<script type="text/html" id="tablebar1">
<div class="layui-btn-container">
<button type="button" class="layui-btn" id="getAll">导出</button>
<button type="button" class="layui-btn">批量删除</button>
</div>
</script>
<script type="text/html" id="tablebar2">
<div class="layui-btn-container">
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
</script>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['table'], function () {
let table = layui.table;
/**表格数据渲染**/
table.render({
elem: "#demo",//对应的table的id
height: 'full-200',//表示整个屏幕高度-200这样的高度
defaultToolbar: ["filter","exports","print"],
url: "json/data.json",//异步的数据接口
toolbar:"#tablebar1",//
limit:10,//每页显示的条数(默认:10)
limits:[20,40,60,80,100],//每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
page: true,//开启分页
cols: [[ //表头
{type: 'checkbox', fixed: 'left'},
//field:对应json的数据字段,title:字段名,with:该字段的宽度,sort:开启排序,fixed:将列固定
{field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
//edit:表格可编辑
, {field: 'username', title: '用户名', width: '10%', edit: true}
//templet的三种使用方法
, {field: 'score', title: '评分', width: '10%', sort: true, templet:function(d){ return d.score >= '50'?'牛逼':'垃圾'; }}
, {field: 'experience', title: '积分', width: '10%', sort: true,templet: '<div><a href="#" class="layui-table-link">积分:{{d.experience}}</a></div>'}
, {field: 'sex', title: '性别', width: '10%', sort: true,templet: '#titleTpl'}
//hide:将该列隐藏
, {field: 'wealth', title: '财富', width: 135, sort: true, hide: true}
, {field: 'city', title: '城市', width: '10%'}
, {field: 'sign', title: '签名', width: '10%'}
, {field: 'classify', title: '职业', width: '20%'}
//toolbar
, {fixed: 'right', title: '操作', width: 190, align: 'left', toolbar: '#tablebar2'}
]]
});
});
</script>
</body>
</html>
(1)基本使用
首先需要准备一个数据接口,这里用json文件模拟一个数据接口,json格式如下:
{
"code":0,
"msg":"",
"count":1000,
"data":[
{
"id":10000,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0",
"experience":255,
"logins":24,
"wealth":82830700,
"classify":"作家",
"score":57
},
{
"id":10001,
"username":"user-1",
"sex":"男",
"city":"城市-1",
"sign":"签名-1",
"experience":884,
"logins":58,
"wealth":64928690,
"classify":"词人",
"score":27
},
{
"id":10002,
"username":"user-2",
"sex":"女",
"city":"城市-2",
"sign":"签名-2",
"experience":650,
"logins":77,
"wealth":6298078,
"classify":"酱油",
"score":31
},
{
"id":10003,
"username":"user-3",
"sex":"女",
"city":"城市-3",
"sign":"签名-3",
"experience":362,
"logins":157,
"wealth":37117017,
"classify":"诗人",
"score":68
},
{
"id":10004,
"username":"user-4",
"sex":"男",
"city":"城市-4",
"sign":"签名-4",
"experience":807,
"logins":51,
"wealth":76263262,
"classify":"作家",
"score":6
},
{
"id":10005,
"username":"user-5",
"sex":"女",
"city":"城市-5",
"sign":"签名-5",
"experience":173,
"logins":68,
"wealth":60344147,
"classify":"作家",
"score":87
},
{
"id":10006,
"username":"user-6",
"sex":"女",
"city":"城市-6",
"sign":"签名-6",
"experience":982,
"logins":37,
"wealth":57768166,
"classify":"作家",
"score":34
},
{
"id":10007,
"username":"user-7",
"sex":"男",
"city":"城市-7",
"sign":"签名-7",
"experience":727,
"logins":150,
"wealth":82030578,
"classify":"作家",
"score":28
},
{
"id":10008,
"username":"user-8",
"sex":"男",
"city":"城市-8",
"sign":"签名-8",
"experience":951,
"logins":133,
"wealth":16503371,
"classify":"词人",
"score":14
},
{
"id":10009,
"username":"user-9",
"sex":"女",
"city":"城市-9",
"sign":"签名-9",
"experience":484,
"logins":25,
"wealth":86801934,
"classify":"词人",
"score":75
},
{
"id":10010,
"username":"user-10",
"sex":"女",
"city":"城市-10",
"sign":"签名-10",
"experience":1016,
"logins":182,
"wealth":71294671,
"classify":"诗人",
"score":34
},
{
"id":10011,
"username":"user-11",
"sex":"女",
"city":"城市-11",
"sign":"签名-11",
"experience":492,
"logins":107,
"wealth":8062783,
"classify":"诗人",
"score":6
},
{
"id":10012,
"username":"user-12",
"sex":"女",
"city":"城市-12",
"sign":"签名-12",
"experience":106,
"logins":176,
"wealth":42622704,
"classify":"词人",
"score":54
},
{
"id":10013,
"username":"user-13",
"sex":"男",
"city":"城市-13",
"sign":"签名-13",
"experience":1047,
"logins":94,
"wealth":59508583,
"classify":"诗人",
"score":63
},
{
"id":10014,
"username":"user-14",
"sex":"男",
"city":"城市-14",
"sign":"签名-14",
"experience":873,
"logins":116,
"wealth":72549912,
"classify":"词人",
"score":8
},
{
"id":10015,
"username":"user-15",
"sex":"女",
"city":"城市-15",
"sign":"签名-15",
"experience":1068,
"logins":27,
"wealth":52737025,
"classify":"作家",
"score":28
},
{
"id":10016,
"username":"user-16",
"sex":"女",
"city":"城市-16",
"sign":"签名-16",
"experience":862,
"logins":168,
"wealth":37069775,
"classify":"酱油",
"score":86
},
{
"id":10017,
"username":"user-17",
"sex":"女",
"city":"城市-17",
"sign":"签名-17",
"experience":1060,
"logins":187,
"wealth":66099525,
"classify":"作家",
"score":69
},
{
"id":10018,
"username":"user-18",
"sex":"女",
"city":"城市-18",
"sign":"签名-18",
"experience":866,
"logins":88,
"wealth":81722326,
"classify":"词人",
"score":74
},
{
"id":10019,
"username":"user-19",
"sex":"女",
"city":"城市-19",
"sign":"签名-19",
"experience":682,
"logins":106,
"wealth":68647362,
"classify":"词人",
"score":51
},
{
"id":10020,
"username":"user-20",
"sex":"男",
"city":"城市-20",
"sign":"签名-20",
"experience":770,
"logins":24,
"wealth":92420248,
"classify":"诗人",
"score":87
},
{
"id":10021,
"username":"user-21",
"sex":"男",
"city":"城市-21",
"sign":"签名-21",
"experience":184,
"logins":131,
"wealth":71566045,
"classify":"词人",
"score":99
},
{
"id":10022,
"username":"user-22",
"sex":"男",
"city":"城市-22",
"sign":"签名-22",
"experience":739,
"logins":152,
"wealth":60907929,
"classify":"作家",
"score":18
}
]
}
注意:cols里面的field对应json返回的数据字段,效果如下
首先是table模块里面可以设置的字段
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
elem | String/DOM | 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 | "#demo" |
cols | Array | 设置表头。值是一个二维数组。方法渲染方式必填 | 详见表头参数 |
url(等) | - | 异步数据接口相关参数。其中 url 参数为必填项 | 详见异步接口 |
toolbar | String/DOM/Boolean | 开启表格头部工具栏区域,该参数支持四种类型值:
注意:
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 参数 |
30 |
limits | Array | 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 |
[30,60,90] |
loading | 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 | 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 | 详见初始排序 |
id | String | 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。 |
test |
skin(等) | - | 设定表格各种外观、尺寸等 | 详见表格风格 |
一些简单的这里就部介绍了,这里主要介绍一些重点的字段
elem
这个是对应table的id,作为唯一标识
url
这个是数据接口,接口返回json数据,通过异步请求的方式,先加载页面,页面加载完之后,它会自己像这个异步接口发送请求,获取数据,返回的数据格式上面已经有说明,进行表格是数据渲染,具体可以去看看,或者直接去官网看看。
toolbar
开启表格头部工具栏区域,该参数支持四种类型值:
- toolbar: ‘#tablebar1’ //指向自定义工具栏模板选择器
- toolbar: ‘< div>xxx< /div>’ //直接传入工具栏模板字符
- toolbar: true //仅开启工具栏,不显示左侧模板
- toolbar: ‘default’ //让工具栏左侧显示默认的内置模板
这里主要用第一种类型值,首先需要一个id名为tablebar1的元素
<script type="text/html" id="tablebar1">
<div class="layui-btn-container">
<button type="button" class="layui-btn">导出</button>
<button type="button" class="layui-btn">批量删除</button>
</div>
</script>
defaultToolbar
page
limit和limits
cols
这个用来设置表格的数据,是核心的一个字段,该字段官网也是直接给了一个详细的表头说明.
一些简单的这里就不介绍了,下面介绍一些比较常用而且复杂的字段
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
field | String | 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识 | username |
title | String | 设定标题名称 | 用户名 |
width | Number/String | 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。 |
200 30% |
minWidth | Number | 局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth | 100 |
type | String | 设定列类型。可选值有:
|
任意一个可选值 |
LAY_CHECKED | Boolean | 是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 | true |
fixed | String | 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 |
left(同 true) right |
hide | Boolean | 是否初始隐藏列,默认:false。layui 2.4.0 新增 | true |
totalRow | Boolean/Object | 是否开启该列的自动合计功能,默认:false。 当开启时,则默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据,格式如下:
如上,在 totalRow 中返回所需统计的列字段名和值即可。 |
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 | 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮 | 详见行工具事件 |
sort
排序
点击上面的图标进行正序或者倒序排序
templet
templet 提供了三种使用方式,请结合实际场景选择最合适的一种:
- 如果自定义模版的字符量太大,我们推荐你采用【方式一】;
- 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
- 如果自定义模板的字符量很小,我们推荐你采用【方式三】
这个是很重要的一个功能,它的官网给了3种用法,这里全列出来了
图中第3种使用方式需要一个名为titleTpl的元素
toolbar
这个的用法跟上面的toolbar用法一样
(2)监听事件及基础方法
下面可能用到的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test1"></table>
<script type="text/html" id="tablebar1">
<div class="layui-btn-container">
<button type="button" class="layui-btn" id="getAll" lay-event="getAll">获取选中行</button>
<button type="button" class="layui-btn" id="delAll" lay-event="dellAll">批量删除</button>
</div>
</script>
<script type="text/html" id="tablebar2">
<div class="layui-btn-container">
<button type="button" class="layui-btn" lay-event="detail">查看</button>
<button type="button" class="layui-btn" lay-event="edit">编辑</button>
<button type="button" class="layui-btn" lay-event="del">删除</button>
</div>
</script>
<!--引入layui.js-->
<script src="../../static/layui/layui.js"></script>
<script>
layui.use(['table','layer'], function () {
let table = layui.table;
let $ = layui.jquery;
/**监听头工具栏事件**/
table.on("toolbar(test1)", function(obj){
let checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getAll':
alert("getAll");
if(checkStatus.data.length != 0){
let dataJson = JSON.stringify(checkStatus.data);
alert(dataJson);
console.log(checkStatus.data[0].username);//获取选中行的数据
console.log(checkStatus.data);//获取选中行的数据
console.log(checkStatus.data.length);//获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll );//表格是否全选
}else{
layer.tips('请先选择数据行', '#getAll');
}
break;
case 'dellAll':
alert("dellAll");
break;
};
});
/**监听单元格工具条**/
table.on('tool(test1)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
let data = obj.data; //获得当前行数据
let layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
let tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
switch (layEvent) {
case 'detail':
alert("查看");
break;
case 'del':
alert("删除");
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index); //向服务端发送删除指令
});
break;
case'edit':
alert("编辑");
obj.update({//同步更新缓存对应的值
id:"更新后的id"
,username: '更新后的username'
,score: '更新后的评分'
,experience:'更新后的积分'
,sex:'更新后的性别'
,wealth:'更新后的财富'
,city:'更新后的城市'
,sign:'更新后的签名'
,classify:'更新后的职业'
});
break;
}
});
/**监听复选框选择**/
table.on('checkbox(test1)', function(obj){
alert(obj.checked);
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
});
/**监听单元格编辑**/
table.on('edit(test1)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
alert(obj.field);
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
/**监听排序事件**/
table.on('sort(test1)', function(obj){ //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
alert(obj.field);
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
console.log(this); //当前排序的 th 对象
//尽管我们的 table 自带排序功能,但并没有请求服务端。
//有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如:
table.reload('idTest', {
initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。
,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
/**表格数据渲染**/
table.render({
id:'testDemo',//唯一id
elem: "#demo",//对应的table的id
height: 'full-200',//表示整个屏幕高度-200这样的高度
defaultToolbar: ["filter","exports","print"],
url: "json/data.json",//异步的数据接口
toolbar:"#tablebar1",//
limit:10,//每页显示的条数(默认:10)
limits:[20,40,60,80,100],//每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
page: true,//开启分页
cols: [[ //表头
{type: 'checkbox', fixed: 'left'},
//field:对应json的数据字段,title:字段名,with:该字段的宽度,sort:开启排序,fixed:将列固定
{field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
//edit:表格可编辑
, {field: 'username', title: '用户名', width: '10%', edit: true}
, {field: 'score', title: '评分', width: '10%', sort: true}
, {field: 'experience', title: '积分', width: '10%', sort: true}
, {field: 'sex', title: '性别', width: '10%', sort: true}
//hide:将该列隐藏
, {field: 'wealth', title: '财富', width: 135, sort: true, hide: true}
, {field: 'city', title: '城市', width: '10%'}
, {field: 'sign', title: '签名', width: '10%'}
, {field: 'classify', title: '职业', width: '20%'}
//toolbar
, {fixed: 'right', title: '操作', width: 190, align: 'left', toolbar: '#tablebar2'}
]]
});
});
</script>
</body>
</html>
监听头工具栏事件
监听单元格工具条
监听复选框选择
监听单元格编辑
监听排序事件
本文地址:https://blog.csdn.net/qq_40298902/article/details/109147776