最细致的LayUI【前端框架】从入门到实战-快速搭建后台管理系统
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
·
最细致的LayUI【前端框架】从入门到实战-快速搭建后台管理系统
LayUI学习思维导图
和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
一、下载与使用
-
官网：
https://www.layui.com/ -
点击立即下载即可
-
下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。
-
使用时我们只需引入下述两个文件即可使用
<!-- LayUI的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<!-- layUI的核心js文件(采用模块化引入) -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8">
- 这是一个基本的入门页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-layui的使用</title>
<!-- LayUI的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<!-- layUI的核心js文件(采用模块化引入) -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<script>
//一版直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
二、布局
1.1 布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-布局容器</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
布局容器
1.固定宽度（两侧留白效果）.layui-container 用的多
2.完整宽度（占据屏幕宽度的100%）.layui-fluid
-->
<!-- 固定宽度（两侧留白效果） -->
<div class="layui-container" style="background-color: navajowhite;height: 300px">
固定宽度
</div>
<!-- 完整宽度（占据屏幕宽度的100%） -->
<div class="layui-fluid" style="background-color: cyan;height: 300px">
固定宽度
</div>
</body>
</html>
1.2 栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-栅格系统.</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
栅格系统
列组合：
1.定义行 .layui-row
2.定义列 .layui-col-md*
md 表示不同屏幕的标识 (xs sm md lg)
* 列的数量
3.每一行被均分为12列，列的总数不能超过12，否则会自动换行
4.响应式规则
栅格会自动根据屏幕的分辨率选择对应的效果。
列边距
.layui-col-space*
* 代表的是px值 (1-30)
列偏移
将列向右偏移指定列数
.*layui-col-md-offset*‘
*代表的是列数
列嵌套
列之间可以无限嵌套
-->
<!-- 布局容器:固定宽度 -->
<div class="layui-container">
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color: deepskyblue">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: bisque">
内容7/12
</div>
</div>
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4" style="background-color: powderblue">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine">
内容4/12
</div>
<div class="layui-col-md6" style="background-color: gray">
内容6/12
</div>
</div>
<!--响应式-->
<hr>
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<!-- 小屏幕占6列，中屏幕占4列 -->
<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占4列，中屏幕占6列 -->
<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占12列，中屏幕占8列 -->
<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
<hr>
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: hotpink">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: indianred">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: powderblue">4</div>
</div>
</div>
<hr/>
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: cyan">4</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color: fuchsia">4
向右移动4列
</div>
</div>
</div>
<hr/>
<h3>列嵌套</h3>
<div class="layui-row">
<div class="layui-col-md6">
<div style="background-color: mediumaquamarine">
<div class="layui-row">
<!-- 嵌套列 -->
<div class="layui-col-md3" style="background-color: burlywood;">
内部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
内部列
</div>
<div class="layui-col-md2" style="background-color: red;">
内部列
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
三、按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-按钮</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<>
<!--
按钮：
向任意html元素设定 *class="layui-btn"*，建立一个基础按钮
通过追加格式为*layui-btn-{type}* 的class来定义其他按钮风格。
-->
<div class="layui-container">
<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
<hr>
<!-- 不同主题的按钮:颜色 -->
<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>
<hr>
<!-- 不同尺寸的按钮 -->
<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>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
<hr>
<!-- layui-btn-radius 圆角按钮 -->
<button class="layui-btn layui-btn-radius">默认圆角按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用圆角按钮</button>
<hr>
<!-- 图标按钮 -->
<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-warm">
<i class="layui-icon layui-icon-heart"></i> 关注
</button>
</div>
</body>
</html>
四、导航 +js
-
导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
-
依赖加载模块：element
实现步骤：
- 引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
- 依赖加载模块
<script type="text/javascript">
// 导航 依赖element模块,否则无法进行功能性操作
layui.use('element',function(){
var element = layui.element;
});
</script>
4.1 水平导航
- 给一个无序列表 ul 添加 class=“layui-nav”
- 给 li 添加 class=“layui-nav-item” 表示的是导航的子项
- 给 li 添加 class=“layui-this” 表示当前被选中的项
- 给 li 里面容器添加 class=“layui-nav-child” 表示的是二级菜单
<body>
<!--
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
-->
<!-- 水平导航 layui-nav -->
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<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="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
①图片与徽章
除了一般的文字导航，我们还内置了图片和徽章的支持，如：
<body>
<!--
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
-->
<!-- 水平导航 -->
<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="#">修改信息</a></dd>
<dd><a href="#">安全管理</a></dd>
<dd><a href="#">退出</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
4.2 导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
- 给无序列表 ul 添加 class=“layui-nav layui-bg-green” 可设置墨绿色背景的导航
- 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
- 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)
<body>
<!-- 墨绿 -->
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<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="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<hr>
<!-- 藏青 -->
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<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="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 艳蓝 -->
<hr>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<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="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
4.3 垂直导航
- 给无序列表 ul 添加 class=“layui-nav layui-nav-tree”
- 给 li 添加 class=“layui-nav-item layui-nav-itemed” 表示此子项目是默认展开的
<!-- 垂直导航 layui-nav layui-nav-tree -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a href="#">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="#">选项1</a></dd>
<dd><a href="#">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="#">解决方案</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>
4.4 侧边导航
- 给无序列表 ul 添加 class=“layui-nav layui-nav-tree layui-nav-side”
- 设定layui-this来指向当前页面分类。
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="#">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="#">选项1</a></dd>
<dd><a href="#">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="#">解决方案</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 layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
4.5 总结
水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是
水平导航：class="layui-nav"
垂直导航需要追加：class="layui-nav-tree"
侧边导航需要追加：class="layui-nav-tree layui-nav-side"
4.6 面包屑导航
- 给 span 标签 添加
layui-breadcrumb
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
- 我们还可以通过设置属性
lay-separator="-"来自定义分隔符
<div class="layui-container">
<!-- 面包屑式导航 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<!-- 设置属性 lay-separator="" 来自定义分隔符 -->
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-导航</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
导航
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
垂直导航 layui-nav layui-nav-tree
侧边导航 layui-nav layui-nav-tree layui-nav-side
导航的主题颜色
layui-bg-颜色
墨绿 molv
藏青 cyan
艳蓝 blue
面包屑式导航
layui-breadcrumb
lay-separator="-" 符号设置面包屑导航符的分割符
-->
<!-- 水平导航 layui-nav -->
<ul class="layui-nav ">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品</a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 垂直导航 layui-nav layui-nav-tree -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品</a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品</a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 设置导航的主题颜色 -->
<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品<span class="layui-badge">6</span></a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!--面包屑式导航-->
<span class="layui-breadcrumb">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<hr>
<!-- 面包屑式导航 -->
<span class="layui-breadcrumb" lay-separator="-">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<hr>
<!--设置属性 lay-separator="" 来自定义分隔符 -->
<span class="layui-breadcrumb" lay-separator="|">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<script type="text/javascript">
//导航 依赖element模块
layui.use('element',function () {
var element = layui.element;
})
</script>
</body>
</html>
五、选项卡
- 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
- 依赖加载模块：element
实现步骤：
- 引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"</script>
- 依赖加载模块
<script type="text/javascript">
// 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
5.1 选项卡风格
-
默认风格给容器添加 class=“layui-tab”
-
简洁风格给容器追加：class=“layui-tab-brief”
-
卡片风格给容器需要追加：class=layui-tab-card
-
==lay-allowClose=“true”==设置可删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-选项卡</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
选项卡
默认风格: layui-tab
简洁风格需要追加class: layui-tab-brief
卡片风格需要追加class: layui-tab-card
可以对父容器设置属性 layui-allowClose="true" 来允许Tab选项卡被删除
-->
<!-- 默认风格 .layui-tab-->
<div class="layui-tab">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 简洁风格:layui-tab layui-tab-brief -->
<div class="layui-tab layui-tab-brief">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 卡片风格:layui-tab layui-tab-card -->
<div class="layui-tab layui-tab-card">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 卡片风格:layui-tab layui-tab-card -->
<div class="layui-tab layui-tab-card" lay-allowClose="true">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<script type="text/javascript">
//选项卡 依赖element模块
layui.use('element',function () {
var element = layui.element;
})
</script>
</body>
</html>
六、表格
6.1 常规用法
-
给 table 标签增加 class=“layui-table”
-
在colgroup 标签中定义表格列的宽度
<col width="数值">表示相应列所占的宽度
-
thead 标签表示表格的头部区域
- tr 标签用于定义表格中的行(行头)
- th 标签用于定义表格中的表头(列头)
- tr 标签用于定义表格中的行(行头)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-表格</title>
<!--不需要依赖js-->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
表格
class="layui-table"
常用属性
lay-even 如果设置了该属性，则可以显示隔行换色的效果
lay-skin 设置表格边框风格
line (行边框风格)
row (列边框风格)
nob (无边框风格)
lay-size (设置表格的尺寸)
sm (小尺寸)
lg (大尺寸)
-->
<!-- 基础表格 .layui-table -->
<table class="layui-table">
<colgroup>
<!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
<col width="150">
<col width="300">
<col>
</colgroup>
<!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
<thead>
<!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
<tr>
<!-- th 用于定义表格中的表头,必须嵌套在 tr 中 -->
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<hr>
<!-- 隔行变色 lay-even -->
<table class="layui-table" lay-even lay-skin="row" lay-size="">
<colgroup>
<!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
<col width="150">
<col width="300">
<col>
</colgroup>
<!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
<thead>
<!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
<tr>
<!-- th 用于定义表格中的表头,必须嵌套在 tr 中 -->
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
</body>
</html>
七、表单
- 依赖加载模块：form
实现步骤：
- 引入资源
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
- 依赖加载模块
<!-- 加载模块 -->
<script type="text/javascript">
// 加载form模块
layui.use("form",function(){
var form = layui.form;
});
</script>
- 在一个容器中设定
class="layui-form"来标识一个表单元素块
<form class="layui-form" action="">
</form>
- 基本的行区块结构，它提供了响应式的支持。
- 给 div 添加 class=“layui-form-item” 代表”行“
- 给 label 添加 class=“layui-form-label” 代表”区“
- 给 div 添加 class=“layui-input-inline” 代表”块“
<body>
<!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
<form action="" class="layui-form">
<!-- 基本的行区块结构，它提供了响应式的支持。-->
<div class="layui-form-item">
<label class="layui-form-label">标题区域</label>
<div class="layui-input-inline">
<!-- 输入框 -->
<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">
</form>
<script type="text/javascript">
// 表单 依赖form模块
layui.use('form', function() {
var form = layui.form;
});
</script>
</body>
6.0 表单的常用属性
6.1 输入框
<!-- 输入框 -->
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
- required：注册浏览器所规定的必填字段
- lay-verify=“required”：注册 form 模块需要验证的类型
- class=“layui-input”：layui.css 提供的通用 CSS 类
6.2 下拉选择框
- 通过
selected属性设置默认选中项 - 通过
disabled属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项) - 通过
optgroup标签给 select 分组 - 通过设置
lay-search属性开启搜索匹配功能
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<select name="city" lay-verify="required">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021" selected>上海</option>
<option value="0571" disabled>杭州</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
①分组
- 可以通过 optgroup 标签给select分组
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<!-- 分组 -->
<select name="quiz">
<option value="">请选择</option>
<!-- 分组城市记忆 -->
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<!-- 分组学生时代 -->
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
②开启搜索匹配
- 通过设置 lay-search 属性开启搜索匹配功能
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<!-- 开启搜索匹配 -->
<select name="city" lay-verify="" lay-search>
<option value ="">请选择</option>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571">layim</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
6.3 复选框
- 通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
- 通过 checked 属性设置被选中的项
- 通过·lay-skin属性设置复选框的样式效果(lay-skin=“primary” 表示原始效果)
- 通过 disabled 属性禁用元素
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--
复选框
1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
2. 通过checked属性设置被选中的项
3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
4. 通过disabled属性禁用元素
-->
<!-- 默认效果 -->
<input type="checkbox" name="hobby" title="唱歌" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" value="dance" />
<input type="checkbox" name="hobby" title="禁用" disabled />
<br>
<!-- 原始效果 -->
<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
<input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled/>
</div>
</div>
</form>
①开关
- 将复选框，设置 ==lay-skin=“switch” 形成开关风格
- 通过 lay-text=“打开的值|关闭的值” 来设定开关的两种状态的文本，通过==|== 分隔
- 通过 checked 属性设置默认打开状态
- 通过 disabled 属性禁用开关
- 通过 value 属性设置选中的值
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关
将复选框，设置lay-skin="switch"形成开关风格
1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
2. 通过checked设置默认打开状态
3. 通过disabled属性禁用开关
4. 通过value属性设置选中的值
-->
<input type="checkbox" name="aa" lay-skin="switch" />
<input type="checkbox" name="bb" lay-skin="switch" checked />
<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
</div>
</div>
</form>
6.4 单选框
- 通过 checked 设置默认选中项
- 通过 disabled 属性禁用单选框
- 通过 value 属性设置选中的值
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--
单选框
1. 通过checked设置默认选中项
2. 通过disabled属性禁用单选框
3. 通过value属性设置选中的值
-->
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</form>
6.5 文本域
- 给 textarea 标签添加class=“layui-textarea”
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--
文本域
class="layui-textarea"：layui.css提供的通用CSS类
-->
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">
</textarea>
</div>
</div>
</form>
6.6 组装行内表单
行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）
- 给 div 设置 class=“layui-inline” ： 定义外层行内
- 给 div 设置 class=“layui-input-inline” ：定义内层行内
<form action="" class="layui-form">
<div class="layui-form-item">
<!-- 定义外层行内 .layui-inline -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<!-- 定义内层行内 .layui-input-inline -->
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<!-- 定义内层行内 -->
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</form>
6.7 表单方框风格
- 给 form 标签追加 class="layui-form-pane "，来设定表单的方框风格。
- 内部结构不变，值得注意的是：复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性
-->
<div class="layui-form-item" pane>
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-表单</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
表单
常用属性：
required 浏览器固定必填字段
lay-verify 需要验证的类型 （required 表示必填字段项）
class="layui-input" 提供的通用的样式
layui-input-inline/block 占据部分宽度/全部宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同name属性值时，会填充)
通过追加 layui-from-place 的class ,来设定表单的方框风格
-->
<!-- 在一个容器中设定 *class="layui-form"* 来标识一个表单元素块 -->
<form action="#" class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<!--文本框-->
<input type="text" name="title" required lay-verify="required" class="layui-input">
</div>
</div>
<!--下拉框-->
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1.可通过selected 属性设置 默认选中项
2.通过disabled 属性开启禁用，可以设置select 和 option 标签
（禁用下拉框 和 下拉框选项）
3.可以通过 optgroup 标签给select分组
4.通过设置lay-select 属性开启搜索匹配功能
-->
<select name="city" lay-verify="" required >
<option value="aa" disabled>请选择一个城市</option>
<option value="010">北京</option>
<option value="021" selected>上海</option>
<option value="0571" disabled>杭州</option>
</select>
<!-- 分组 -->
<select name="quiz">
<option value="">请选择</option>
<!-- 分组城市记忆 -->
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<!-- 分组学生时代 -->
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
<!--开启搜索匹配-->
<select name="city" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<!--复选框-->
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--
复选框
1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
2. 通过checked属性设置被选中的项
3. 通过lay-skin属性设置复选框的样式效果（lay-skin="primary"表示原始效果）
4. 通过disabled 属性禁用元素
-->
<!--默认效果-->
<input type="checkbox" name="hobby" title="唱歌" value="sing" checked>
<input type="checkbox" name="hobby" title="跳舞" value="dance">
<input type="checkbox" name="hobby" title="Rap" disabled>
<br>
<!--原始效果-->
<input type="checkbox" name="hobby" title="唱歌" value="sing" lay-skin="primary" checked>
<input type="checkbox" name="hobby" title="跳舞" value="dance" lay-skin="primary">
<input type="checkbox" name="hobby" title="Rap" lay-skin="primary" disabled>
</div>
</div>
<!--开关 复选框改造-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关
将复选框，设置lay-skin="switch" 形成开关风格
1.通过lay-text="打开的值|关闭的值" 来设置开关两种状态显示的值
通过"|" 分割
2.通过checked设置默认打开状态
3.disabled
4.value 设定选定的值
-->
<input type="checkbox" name="aa" lay-skin="switch">
<input type="checkbox" name="bb" lay-skin="switch" checked>
<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off">
<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开">
<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled>
</div>
</div>
<!--单选框-->
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--
单选框
1. 通过checked设置默认选中项
2. 通过disabled属性禁用单选框
3. 通过value属性设置选中的值
-->
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<!--文本域-->
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--
文本域
class="layui-textarea" layui.css 提供的通用css类
-->
<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"
class="layui-textarea">
</textarea>
</div>
</div>
<!--
组装行内表单
class="layui-inline" 定义外层行内
class="layui-input-inline" 定义内层行内
-->
<div class="layui-form-item">
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input" >
</div>
</div>
</div>
<!--忽略layui-->
<div class="layui-form-item">
<label class="layui-form-label">原始效果</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="nan" title="男" lay-ignore />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<hr>
<br>
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性
-->
<div class="layui-form-item" pane>
<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>
<!-- 加载模块 -->
<script type="text/javascript">
// 加载form模块
layui.use("form", function () {
var form = layui.form;
});
</script>
</body>
</html>
八、弹出层
8.1 弹出层
弹出层官方文档：https://layuion.com/layer/
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)*加载模块 |
①作为独立组件使用
1、首先去https://layuion.com/layer/独立版本官网下载组件包
2、下载完成后解压，将 layer.js 和 layer.css 拷贝到我们的项目中
3、引入资源
<!--作为独立徐组件使用-->
<link rel="stylesheet" type="text/css" href="layer/layer.css">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="UTF-8"></script>
4、开始使用
<body>
<script type="text/javascript">
layer.msg("Hello");
</script>
</body>
②使用模块化🔥
- 引入资源
<!--layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
2、在 script 中使用 layui.use() 加载模块
- 依赖模块：layer
<body>
<script type="text/javascript">
//加载模块
layui.use('layer', function() {
var layer = layui.layer;
layer.msg("Hello World!");
})
</script>
</body>
8.2 基础参数
①type 基本层类型
-
类型 Number ， 默认为0
-
layer 提供了5 种层类型。可传入的值有
- 0 ➡ 信息框，默认
- 1 ➡ 页面层
- 2 ➡ iframe层
- 3 ➡ 加载层
- 4 ➡ tips层
-
若采用 layer.open({type:1}) 方式调用，则 type 为必填项(信息框除外)
②title标题
- 类型：String/Array/Boolean，默认 ‘信息’
- title 支持三种类型的值
- 若传入的是普通的字符串，如：title:‘我是标题’ ，那么只会改变标题文本；
- 若需要自定义标题区域样式，title:[‘文本’,‘font-size: 18px’]，数组第二项可以写任意css 样式
- 若不想显示标题栏，title: false
<script type="text/javascript">
//加载模块
layui.use('layer', function() {
var layer = layui.layer;
/* 信息框 */
layer.open({
type: 0, // 0为信息框
title:"系统消息",
// title: false, //不显示标题
// title: ['标题', 'color:red;'], // 自定义标题区域样式
// content可以传入任意的文本或html
content: "Hello"
});
})
</script>
③area宽高
- 类型： String/Array，默认为auto
- 在默认状态下，layer是宽高都自适应的
- 但当你只想定义宽度时，你可以 area: ‘500px’，高度仍然是自适应的
- 当你宽高都要定义时，你可以 area: [‘500px’, ‘300px’]
④btn按钮
- 类型：String/Array，默认 ‘确认’
- 信息框(type = 0)模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
- 当您只想自定义一个按钮时，你可以 btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]
- 当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
layer.msg('你愿意和我做朋友么？', {
time: 0, //不自动关闭
btn: ['当然愿意', '狠心拒绝'], // [按钮1,按钮2]
// 按钮1的回调函数
yes: function(index) {
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开心', '快乐']
});
},
// 按钮2的回调函数
btn2: function(index) {
layer.close(index); // 关闭当前弹出框
layer.msg('好吧,再见!', {
icon: 5,
btn: '88'
})
}
});
})
</script>
</body>
⑤time自动关闭所需毫秒
- 类型：Number，默认为0
- 默认不会关闭。当你想关闭时，可以 time:5000 ，即代表 5 s 后自动关闭
⑥content内容
-
类型：String/DOM/Array，默认 : " "
-
content 可传入的值是灵活多变的，不仅可以传入普通的 html 内容，还可以指定DOM，更可以随着 type 的不同而不同
-
页面层 ,就是信息提示
-
iframe 弹出来的是页面,例如百度页面
-
tips 就是一个信息提示小框
-
<script type="text/javascript">
//加载模块
layui.use('layer', function() {
var layer = layui.layer;
/* 页面层 */
layer.open({
type: 1,
title: "系统消息",
// content可以传入任意的文本或html
content: "<div style='height:200px;width:400px'>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'],
// area: '500px' ,// 设置宽度，高度自适应
area: ['800px', '400px'] // 设置宽高
});
})
</script>
<body>
<span>内容1</span>
<span>内容2</span>
<span>内容3</span>
<span id="sp">内容4</span>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
/* tips层 */
layer.open({
type: 4,
content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
});
})
</script>
</body>
⑦icon图标
- 类型：Number，默认：-1(信息框) / 0(加载层)
- 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6
- 如果是加载层，可以传入0-2
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
//加载层
layer.alert('酷毙了', {
icon: 1 // 0 ~ 6 均可填
});
})
</script>
</body>
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
//信息层
layer.msg('不开心。。', {
icon: 5 // -1 ~ 6 均可填
});
})
</script>
</body>
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
// 加载层
layer.load(1); // 0 ~ 2 均可填
})
</script>
</body>
我们的信息框还可以参与互动响应,会有多个选项可选：
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
layer.msg('你愿意和我做朋友么？', {
time: 0, //第一个弹出层不自动关闭(因为默认弹出层会5s自动关闭)
btn: ['当然愿意', '狠心拒绝'], // 按钮
yes: function(index) {
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开心', '快乐']
});
}
});
})
</script>
</body>
8.3 核心方法
①layer.open(options)
- 原始核心方法
- 创建任何类型的弹层都会返回一个当前层索引，上述的 options 即是基础参数
<body>
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
var index = layer.open({
content: 'test'
});
console.log(index);
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
})
</script>
</body>
②layer.alert()
- 普通信息框
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
//eg1
//layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {
icon: 1
});
})
</script>
③layer.msg()
- 提示框
- 默认是 3s 关闭
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {
icon: 6
});
//eg3
layer.msg('关闭后想做些什么', function() {
//do something
});
//eg
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function() {
//do something
});
</script>
④layer.load()
- 加载层
- 加载层默认是不会自动关闭的
<script type="text/javascript">
layui.use('layer', function() {
var layer = layui.layer;
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {
time: 10 * 1000
}); //又换了种风格，并且设定最长等待10秒
//关闭
layer.close(index);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-弹出层</title>
<!--作为独立徐组件使用-->
<!-- <link rel="stylesheet" type="text/css" href="layer/layer.css">-->
<!-- <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>-->
<!-- <script src="layer/layer.js" type="text/javascript" charset="UTF-8"></script>-->
<!--layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
两种使用方式：
1. 作为独立徐组件使用
在layer独立版本官网下载组件包，在需要使用layer的页面加载1.8版本以上的jquery的js文件和layer.js文件
2. layui模块化使用
只需要引入layui的 css与js文件，在script使用layui.use() 加载模块即可
-->
<span>内容1</span>
<span>内容2</span>
<span>内容3</span>
<span id="sp">内容4</span>
<script type="text/javascript">
//使用layer
//layer.msg("hello");
<!--加载模块-->
layui.use("layer", function () {
var layer = layui.layer;
})
//使用layer
//layer.msg("hi");
/* 信息框 */
// layer.open({
// type: 0, // 0为信息框
// //title:"系统消息",
// //title: false, //不显示标题
// title: ['标题', 'color:red;'], // 自定义标题区域样式
//
// // content可以传入任意的文本或html
// content: "Hello"
// });
/* 页面层 */
// layer.open({
// type: 1, // 0为信息框
// title:"系统消息",
//
// // content可以传入任意的文本或html
// content: "<div style=\"height: 200px;width: 400px\">Hello</div>"
// });
/* iframe */
// layer.open({
// type: 2, // 0为信息框
// title:"系统消息",
//
// // content可以传入任意的文本或html
// content: "https://ai.taobao.com/?pid=mm_119961239_82150369_109217850080"
// //content是一个URL,如果你不想让iframe出现滚动条， 你还可以content:['url', 'no']
// //content:['http://www.baidu.com', 'no']
//
// //,area: '500px' //设置宽度，高度自适应 可以再拖大小
// //,area: ['800px', '400px'] //设置宽高 不可以拖大小
//
// });
/* tips层 */
// layer.open({
// type: 4,
// title:"系统消息",
// content:['内容', '#sp'] //数组第二项即吸附元素选择器 或者 DOM
// });
//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, //第一个弹出层不自动关闭(因为默认弹出层会5s自动关闭)
// btn: ['当然愿意', '狠心拒绝'], // 按钮
// yes: function(index) {
// layer.close(index); // 关闭当前弹出框
// layer.msg('新朋友，你好！', {
// icon: 6, // 图标
// btn: ['开心', '快乐']
// });
// }
// });
//eg3
//layer.msg('这是常用的弹出层');
//eg4
//layer.msg('so sad', {icon: 5});
//eg5
// layer.msg('玩命加载中...', function () {
// // 关闭后的操作
// layer.msg('❤')
// })
</script>
</body>
</html>
九、日期与时间选择
日期与时间选择官方文档：https://layuion.com/docs/modules/laydate.html
和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版
| 场景 | 用前准备 | 调用方式 |
|---|---|---|
| 1. 在 layui 模块中使用 | 下载 layui 后，引入layui.css和layui.js即可 | 通过*layui.use(‘laydate’, callback)*加载模块后，再调用方法 |
| 2. 作为独立组件使用 | 去 layDate 独立版本官网下载组件包，引入 laydate.js 即可 | 直接调用方法使用 |
我们使用模块化使用
1、引入资源
<!-- layui模块化使用 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
2、在 script 中使用 layui.use() 加载模块
- 依赖模块：laydate
<body>
<!-- 用一个容器元素放我们的日期时间选择器 -->
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
<script type="text/javascript">
layui.use('laydate', function() {
var laydate = layui.laydate;
// 加载 laydate 实例
laydate.render({
elem: "#date1" //绑定id为date1的元素
})
})
</script>
</body>
9.1 基础参数
基础参数选项
- 通过核心方法：laydate.render(options) 来设置基础参数，
①elem绑定元素
- 类型：String/DOM ，默认值：无
- 必填项，用于执行绑定日期渲染的元素，值一般为选择器，或DOM对象
<script>
layui.use('laydate',function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
})
})
</script>
②type控件选择类型
- 类型：String ，默认值：date
- 用于单独提供不同的选择器类型，可选值如下表
<body>
<!-- 用一个容器元素放我们的日期时间选择器 -->
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date2" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date3" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date4" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date5" />
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="date6" />
</div>
<script type="text/javascript">
layui.use('laydate', function() {
var laydate = layui.laydate;
// 加载 laydate 实例
laydate.render({
elem: "#date1", //绑定id为date1的元素
});
laydate.render({
elem: "#date2", //绑定id为date2的元素
type: "year", // 年选择器
});
laydate.render({
elem: "#date3", //绑定id为date3的元素
type: "month" // 年月选择器
});
laydate.render({
elem: "#date4", //绑定id为date4的元素
type: "date" // 年月日选择器
});
laydate.render({
elem: "#date5", //绑定id为date5的元素
type: "time" // 时间（时分秒）选择器
});
laydate.render({
elem: "#date6", //绑定id为date6的元素
type: "datetime" // 年月日时分秒选择器
});
})
</script>
</body>
③format自定义格式
- 类型：String，默认值：yyyy-MM-dd
- 通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示
<body>
<!-- 用一个容器元素放我们的日期时间选择器 -->
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate', function() {
var laydate = layui.laydate;
//自定义日期格式
laydate.render({
elem: '#date1',
format: 'yyyy/MM月dd日' // yyyy年MM月dd日可任意组合
});
});
</script>
</body>
④value初始值
- 类型：String，默认值：new Date()
- 支持传入符合format参数设定的日期格式字符，或者 new Date()
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate', function() {
var laydate = layui.laydate;
// 传入符合format格式的字符给初始值
laydate.render({
elem: '#date1',
value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传入Date对象给初始值
laydate.render({
elem: '#date2',
value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});
});
</script>
⑤lang语言
- 类型：String，默认：cn
- 内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#date1',
lang: 'en'
});
});
</script>
⑥theme主题
- 类型：String ，默认值：default
- 内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#date1',
theme: 'molv'
});
});
</script>
⑦calendar公历节日
- 类型：Boolean，默认值：false
- 内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示
<script type="text/javascript">
// 加载laydate模块
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#date1',
lang: 'cn',
calendar: true
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-日期与时间选择</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date2"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date3"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date4"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date5"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date6"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date7"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date8"/>
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="date9"/>
</div>
<script type="text/javascript">
//加载laydate 模块
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行加载laydate 的实例
laydate.render({
elem: '#date1'// 绑定id为date1 的元素
});
laydate.render({
elem: '#date2',
type: "year" //年选择器
});
laydate.render({
elem: '#date3',
type: "month" //年月选择器
});
laydate.render({
elem: '#date4',
type: "date" //年月日
});
laydate.render({
elem: '#date5',
type: "time" //时间
});
laydate.render({
elem: '#date6',
type: "datetime" //年月日 时分秒
});
//自定义日期格式
laydate.render({
elem: '#date7',
format: 'yyyy年MM月dd日'//组合
});
//传入符合format格式的字符串初始值
laydate.render({
elem: '#date8',
value: '2018-08-18' //必须遵循format参数设定的 格式
});
laydate.render({
elem: '#date9',
value: new Date(1534766888000) //参数即为：2018-08-20 20:08:18 的时间戳
});
});
//
</script>
</body>
</html>
十、分页
- 分页官方文档：https://layuion.com/docs/modules/laypage.html
- 模块加载名称：laypage
- laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laypage模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
});
});
</script>
</body>
10.1 基础参数
①基础参数选项
- 通过核心方法：laypage.render(options) 来设置基础参数
②elem绑定元素
- 类型：String/Object，比填项
- elem 指向存放分页的容器，值可以是 容器 ID、DOM对象
- elem: ‘id’ 注意：这里不能加 # 号
- elem: document.getElementById(‘id’)
③count数据总数
- 类型：Number，必填项
- 数据总数，一般通过服务端得到
- count: 100
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取的
});
});
</script>
</body>
④limit每页显示条数
- 类型：Number，默认值 10
- laypage将会借助 count 和 limit 计算出分页数。
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
limit: 5, // 每页显示的数量
});
});
</script>
</body>
⑤layout自定义排版
- 类型：Array，默认值：[‘prev’, ‘page’, ‘next’]
- 自定义排版，可选值有：
- count ：总条目输出区域
- limit：条目选项区域
- prev：上一页区域
- page：分页区域
- next：下一页区域
- refresh：页面刷新区域(layui 2.3.0新增)
- skip：快捷跳页区域
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh']
});
});
</script>
</body>
⑥limits每页条数的选择项
- 类型：Array，默认值：[10,20,30,40,50]
- 如果 layout 参数开启了 limit，则会出现每页条数的select下拉选择框
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
//limit: 5, // 每页显示的数量
limits: [5, 10, 20, 30], // 每页条数的选择项
layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh']
});
});
</script>
</body>
⑦groups连续出现的页码个数
- 类型：Number，默认值为5
- 连续出现的页面个数，就是分页区域省略号…之前显示的页面个数
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
groups: 7, // 连续显示的页码数
});
});
</script>
</body>
10.2 jump切换分页的回调
- 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
<body>
<div id="page"></div>
<script type="text/javascript">
// 加载laydate模块
layui.use('laypage', function() {
var laypage = layui.laypage;
// 加载laypage实例
laypage.render({
elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
count: 100, // 总数量，一般是从服务器获取
groups: 7, // 连续显示的页码数
layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh'],
});
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
}
}
});
});
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-分页</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="page"></div>
<script type="text/javascript">
//加载laypage 模块
layui.use('laypage', function () {
var laypage = layui.laypage;
// 加载laypage 实例
// laypage.render({
// elem: "page", // elem属性绑定的是容器的ID属性值，注意不加#
// count: 100, //总数量，一般是从服务器获取
// limit: 5, //每页显示的数量
// limits: [5,10,20,30], //每页条数选择项
// layout: ['prev', 'page', 'next', 'limit', 'count'], //自定义排版
// groups: 10,// 连续显示的页码数
// })
// 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
// }
// }
// });
});
//
</script>
</body>
</html>
十一、数据表格
- 支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
- 模块加载名称：table
1、引入资源
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
2、在页面放置一个元素，然后通过 table.render() 方法指定该容器
<body>
<!-- 准备容器（标签），设置id属性值 -->
<div id="demo"></div>
<script type="text/javascript">
// 加载table模块
layui.use('table', function() {
var table = layui.table;
// 加载table实例
table.render({
elem: "#demo", //elem属性用来绑定容器的id属性值
url: "js/user.json", // 数据接口
cols: [
[{
field: 'id',
title: '用户编号',
sort: true,
width: 120
}, {
field: 'username',
title: '用户姓名',
width: 100
}, {
field: 'sex',
title: '性别',
width: 100,
sort: true
}, {
field: 'city',
title: '城市',
width: 100
}, {
field: 'sign',
title: '签名'
}]
],
})
})
</script>
</body>
注意：上面有一个数据接口 url，通常是从服务器获取。我们这里先本地模拟一些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"
}
]
}
11.1 三种初始化渲染方式
①方法渲染🔥
<body>
<div id="demo"></div>
<script type="text/javascript">
layui.use('table',function(){
var table = layui.table;
table.render({
elem: "#demo",
url: 'js/user.json', // 数据接口
height: 315, // 容器高度
page:true, // 开启分页
cols: [[ // 设置表头
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
{field: 'sex', title: '性别'}
]]
})
})
</script>
</body>
②自动渲染
-
所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需写初始的渲染方法。我们需要关注的是以下三点
-
带有 class=“layui-table” 的
标签 -
对标签设置属性 lay-data=" " 用于配置一些基础参数
-
在 标签中设置属性 lay-data=" " 用于配置表头信息。
-
<body>
<table class="layui-table" lay-data="{height:315, url:'js/user.json', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
<script type="text/javascript">
layui.use('table', function() {
var table = layui.table;
})
</script>
</body>
11.2 基础参数
- 基础参数官方文档：https://layuion.com/docs/modules/table.html#options
- 官方文档参数很多，我们不必记忆，只要会查会用即可
①elem绑定元素
- 类型：String/DOM
- 指定原始 table 容器的选择器或 DOM，方法渲染方式为必填
②cols设置表头
表头参数官方文档：https://layuion.com/docs/modules/table.html#cols
- 类型：Array
- 设置表头，值是一个二维数组。表头参数设定在数组内，表头部分参数如下：
③url异步数据参数
官方文档：https://layuion.com/docs/modules/table.html#async
- 还是一句话，不必记忆，会查会用会修改即可
11.3 page开启分页
- 类型：Boolean/Object，开启分页(默认为 false)
- 支持传入一个对象，里面可包含 laypage 组件所有支持的参数(jump、elem除外)
<body>
<!-- 准备一个容器,设置id属性值 -->
<table id="demo"></table>
<script type="text/javascript">
// 加载 table 模块
layui.use('table', function() {
var table = layui.table;
// 加载table 实例
table.render({
elem: "#demo", // elem属性用来绑定容器的 id 属性值
url: "js/user.json",// 数据接口
cols:[[
// 设置序列号
{field:'aa',type:"numbers"},
// 设置复选框列
{field:'bb',type:"checkbox"},
{field:'id',title:'用户编号',sort:true,width:120},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',width:100,sort:true},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名'}
]],
// 开启分页
page: true
})
})
</script>
</body>
11.4 toolbar开启表格、头部工具栏
- 类型：String/DOM/Boolean，开启表格头部工具栏，该参数支持四种类型值
- toolbar: ‘#toolbarDemo’ 指向自定义工具栏模板选择器
- toolbar: ‘
xxx’ 直接传入工具栏模板字符
- toolbar: true 仅开启工具栏，不显示左侧模板
- toolbar: ‘default’ 让工具栏左侧显示默认的内置模板
<body>
<div id="demo"></div>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function() {
var table = layui.table;
table.render({
elem: "#demo",
url: 'js/user.json', // 数据接口
cols:[[
// 设置序列号列
{field:'aa',type:"numbers"},
// 设置复选框列
{field:'aa',type:"checkbox"},
{field:'id',title:'用户编号',sort:true,width:120,hide:true},
{field:'username',title:'用户姓名',width:100,edit:'text'},
{field:'sex',title:'性别',width:100,sort:true},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名',edit:'text'},
// 设置表头工具栏
{field:"操作",toolbar:"#barDemo"}
]],
// 开启分页
page:true,
// 设置表格工具栏
toolbar:"#toolbarDemo"
})
})
</script>
</body>
①defaultTooblar头部工具栏右侧图标
- 类型：Array，默认值：[“filter”,“exports”,“print”]
- 该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：
- filter: 显示筛选图标
- exports: 显示导出图标
- print: 显示打印图标
11.5 监听头工具栏事件
官方文档：https://layuion.com/docs/modules/table.html#on
点击头部工具栏区域设定了属性为 lay-event=“” 的元素时触发
- 语法：table.on(‘event(filter)’,callback)
- event 为内置事件名，filter 为容器 lay-filter 设定的值
- 回调函数返回一个 object 参数
- obj.config对象中可以获取id属性值，即表示当前容器的ID属性值
- obj.event 对象中可以获取 事件名
- table.checkStatus(obj.config.id) 获取当前表格被选中记录对象，返回数组
obj 包含如下：
obj.event 包含如下：
table.checkStatus(obj.config.id) 包含如下：
<body>
<div id="demo" lay-filter="test"></div>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function() {
var table = layui.table;
table.render({
elem: "#demo",
url: 'js/user.json', // 数据接口
cols: [
[
// 设置序列号列
{
field: 'aa',
type: "numbers"
},
// 设置复选框列
{
field: 'aa',
type: "checkbox"
}, {
field: 'id',
title: '用户编号',
sort: true,
width: 120,
hide: true
}, {
field: 'username',
title: '用户姓名',
width: 100,
}, {
field: 'sex',
title: '性别',
width: 100,
sort: true
}, {
field: 'city',
title: '城市',
width: 100
}, {
field: 'sign',
title: '签名',
},
// 设置表头工具栏
{
field: "操作",
toolbar: "#barDemo"
}
]
],
// 开启分页
page: true,
// 设置表格工具栏
toolbar: "#toolbarDemo"
})
/**
* 头监听事件
* 语法：
* table.on('toolbar(demo)',function(obj){
});
注:demo表示的是容器上设置的lay-filter属性值
*/
table.on('toolbar(test)', function(obj) {
// console.log(obj);
// obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo
// 获取当前表格被选中记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
// 获取事件名
var eventName = obj.event;
// 判断事件名，执行对应的代码
switch (eventName) {
case "getCheckData":
// 获取被选中的记录的数组
var arr = checkStatus.data;
// 将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
// 获取被选中的记录的数组
var arr = checkStatus.data;
layer.msg("选中了" + arr.length + "条记录！")
break;
case "isAll":
// 通过isAll属性判断是否全选
var flag = checkStatus.isAll;
var str = flag ? '全选' : '未全选';
layer.msg(str);
break;
case "LAYTABLE_TIPS":
layer.alert("这是一个自定义的图标按钮");
break;
}
});
})
</script>
</body>
11.6 监听行工具栏事件
官方文档：https://layuion.com/docs/modules/table.html#ontool
-
语法：table.on(‘tool(filter)’,callback{})
- filter 为容器 lay-filter 设定的值
-
回调函数返回一个 object 参数
- obj.data 获取当前行数据
- obj.event 获取 lay-event 对应的值 (也可以是表头 event 参数对应的值)
obj.data 包含如下：
<body>
<div id="demo" lay-filter="test"></div>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function() {
var table = layui.table;
table.render({
elem: "#demo",
url: 'js/user.json', // 数据接口
cols: [
[
// 设置序列号列
{
field: 'aa',
type: "numbers"
},
// 设置复选框列
{
field: 'aa',
type: "checkbox"
}, {
field: 'id',
title: '用户编号',
sort: true,
width: 120,
hide: true
}, {
field: 'username',
title: '用户姓名',
width: 100,
}, {
field: 'sex',
title: '性别',
width: 100,
sort: true
}, {
field: 'city',
title: '城市',
width: 100
}, {
field: 'sign',
title: '签名',
},
// 设置表头工具栏
{
field: "操作",
toolbar: "#barDemo"
}
]
],
// 开启分页
page: true,
// 设置表格工具栏
toolbar: "#toolbarDemo"
})
/**
* 监听行工具栏事件
*/
table.on('tool(test)', function(obj) {
// 得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
// 得到事件名
var eventName = obj.event;
// 判断事件名，执行对应的方法
if (eventName == 'del') { // 删除
// 确认框
layer.confirm("您确认要删除吗？", function(index) {
// 删除指定tr del()
obj.del();
// 关闭弹出层（index是当前弹出层的下标）
layer.close(index);
});
} else if (eventName == 'edit') { // 编辑
// 输出框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType: 0,
value: tr.username // 设置输入框的值
}, function(value, index) {
// 修改指定单元格的值
// value表示输入的值
obj.update({
username: value
});
// 关闭弹出层
layer.close(index);
});
}
});
})
</script>
</body>
11.7 监听单元格编辑
官方文档：https://layuion.com/docs/modules/table.html#onedit
-
监听单元格编辑之前要先打开单元格的编辑
- edit 类型String，单元格编辑类型（默认不开启）目前只支持：text（输入框）
-
语法：table.on(‘edit(filter)’,callback)
- filter 为容器 lay-filter 设定的值
-
单元格被编辑，且值发生改变时触发，回调函数返回一个 object 参数
- obj.value 获取修改后的值
- obj.filed 获取编辑的字段名
- obj.data 获取所在行的所有相关数据
<body>
<!-- 准备一个容器,设置id属性值 -->
<table id="demo"></table>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
// 加载 table 模块
layui.use('table', function() {
var table = layui.table;
// 加载table 实例
table.render({
elem: "#demo", // elem属性用来绑定容器的 id 属性值
url: "js/user.json", // 数据接口
cols: [
[
// 设置序列号列
{
field: 'aa',
type: "numbers"
},
// 设置复选框列
{
field: 'aa',
type: "checkbox"
}, {
field: 'id',
title: '用户编号',
sort: true,
width: 120,
hide: true
}, {
field: 'username',
title: '用户姓名',
width: 100,
edit: 'text'
}, {
field: 'sex',
title: '性别',
width: 100,
sort: true
}, {
field: 'city',
title: '城市',
width: 100
}, {
field: 'sign',
title: '签名',
edit: 'text'
},
// 设置表头工具栏
{
field: "操作",
toolbar: "#barDemo"
}
]
],
// 开启分页
page: true,
// 设置表格工具栏
toolbar: "#toolbarDemo"
})
/**
* 监听单元格编辑事件
* 表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
*/
table.on('edit(test)', function(obj) {
console.log(obj);
// 获取修改后的值
var value = obj.value;
// 得到当前修改的tr对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
layer.msg("【ID:" + data.id + "】的" + field + "字段的值修改为：" + value);
});
})
</script>
</body>
11.8 数据表格重载
官方文档：https://layuion.com/docs/modules/table.html#reload
- 语法：table.reload(ID,options,deep)
- 参数 ID 即为基础参数id对应的值
- 参数 options 即为各项基础参数
- 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false。注意：deep 参数为 layui 2.6.0 开始新增。
<body>
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!-- 准备一个容器,设置id属性值 -->
<table id="demo"></table>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
// 加载 table 模块
layui.use('table', function() {
var table = layui.table;
var $ = layui.jquery; // 获取jquery对象
// 加载table 实例
table.render({
elem: "#demo", // elem属性用来绑定容器的 id 属性值
url: "js/user.json", // 数据接口
cols: [
[
// 设置序列号列
{
field: 'aa',
type: "numbers"
},
// 设置复选框列
{
field: 'aa',
type: "checkbox"
}, {
field: 'id',
title: '用户编号',
sort: true,
width: 120,
hide: true
}, {
field: 'username',
title: '用户姓名',
width: 100,
edit: 'text'
}, {
field: 'sex',
title: '性别',
width: 100,
sort: true
}, {
field: 'city',
title: '城市',
width: 100
}, {
field: 'sign',
title: '签名',
edit: 'text'
},
// 设置表头工具栏
{
field: "操作",
toolbar: "#barDemo"
}
]
],
// 开启分页
page: true,
// 设置表格工具栏
toolbar: "#toolbarDemo"
})
/**
* 监听单元格编辑事件
* 表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
*/
table.on('edit(test)', function(obj) {
console.log(obj);
// 获取修改后的值
var value = obj.value;
// 得到当前修改的tr对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
layer.msg("【ID:" + data.id + "】的" + field + "字段的值修改为：" + value);
});
/**
* 给指定元素绑定事件
*/
$(document).on('click', '#searchBtn', function(data) {
// 获取搜索文本框对象
var sreach = $("#demoReload");
// 调用数据表格的重载方法 table.reload(ID, options)
table.reload('demo', {
where: { // 设置需要传递的参数
id: sreach.val(),
name: "zhangsan"
},
page: {
// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
curr: 1 // 从第一页开始
}
});
});
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<table id="demo"></table>
<hr>
<!-- 方法渲染 -->
<!-- 准备容器（标签），设置id属性值 -->
<table id="demo2"></table>
<!--
自动渲染
(1)带有 class="layui-table" 的 <table> 标签
(2)对标签设置属性 lay-data="" 用于配置一些基础参数
(3)在*<th>* 标签中设置属性 lay-data="" 用于配置表头信息
-->
<hr>
<table class="layui-table" lay-data="{url:'js/user.json', page:true}">
<thead>
<tr>
<th lay-data="{field:'id',width:100}">ID</th>
<th lay-data="{field:'username'}">用户名</th>
<th lay-data="{field:'sex', sort:true}">性别</th>
</tr>
</thead>
</table>
<!-- 装换静态表格 -->
<hr>
<table lay-filter="demo" >
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experiment', width:80, sort:true}">昵称</th>
<th lay-data="{field:'sign'}">昵称</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>66</td>
<td>人生就像是一场修行</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 加载table模块
layui.use("table", function () {
var table = layui.table;
//加载 table 实例
table.render({
elem: "#demo", //elem属性用来绑定容器的ID属性值
url: "js/user.json", //数据接口
cols:[[
{field: 'id', title: '用户编号', sort: true, width: 120},
{field: 'username', title: '用户姓名', width: 100},
{field: 'sex', title: '性别', sort: true, width: 100},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', width: 100},
]],
})
/* 方法渲染 */
table.render({
elem: "#demo2",
url: 'js/user.json', // 数据接口
height: 315, // 容器高度
page:true, // 开启分页
cols: [[ // 设置表头
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
{field: 'sex', title: '性别'}
]]
})
/* 抓换静态table */
table.init('demo', {
height: 315 //设置高度
//支持所有基础参数
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!-- 准备容器（标签），设置id属性值 -->
<table id="demo" lay-filter="test"></table>
<!-- 表格工具栏 -->
<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">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
// 加载table模块
layui.use("table", function () {
var table = layui.table;
var $ = layui.jquery; //获取jquery对象
//加载 table 实例
table.render({
elem: "#demo", //elem属性用来绑定容器的ID属性值
url: "js/user.json", //数据接口
cols: [[
//设置序列号
{field: 'aa', type:'numbers'},
//设置复选框列
{field: 'aa', type:'checkbox'},
{field: 'id', title: '用户编号', sort: true, width: 120, hide: true},
{field: 'username', title: '用户姓名', width: 100, edit:'text'},
{field: 'sex', title: '性别', sort: true, width: 100},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', width: 100, edit: true},
//设置表头工具栏
{field: '操作', toolbar:'#barDemo'},
]],
//开启分页
page: true,
// 设置表格工具栏
toolbar: "#toolbarDemo"
})
/**
*
* 头监听事件
* 语法： filter
* table.on('toolbar(demo)', function(obj){
*
*
* })
* 注意：demo表示的是容器上设置的lay-filter属性性
*/
table.on('toolbar(test)', function(obj) {
console.log(obj);
// obj.config 对象中可以获取 id属性值，即表示当前容器的Id属性值，也就是demo
// 获取当前表格被选中记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
// 获取事件名
var eventName = obj.event;
// 根据事件名的，执行对应的代码
switch (eventName) {
case "getCheckData":
//获取被选中的数组
var arr = checkStatus.data;
// 将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
//获取被选中的数组
var arr = checkStatus.data;
layer.msg("选中了" + arr.length + "条记录！")
break
case "isAll":
//通过 isAll 属性判断是否全选
var flag = checkStatus.isAll;
var str = flag ? '全选' : '未全选';
layer.msg(str);
break
default:
break;
}
});
/**
* 监听行工具栏事件
*
*/
table.on('tool(test)', function (obj) {
//得到当前操作行的相关信息
var tr = obj.data;
console.log(obj);
console.log(tr);
// 得到事件名
var eventName = obj.event;
// 判断事件名，执行对应的方法
if(eventName == 'del') {//删除
//确认框 确认就执行右边的方法
layer.confirm("你确认要删除吗", function (index) {
//删除指定tr del()
obj.del();
//关闭弹出层 (index 是当前弹出层的下标)
layer.close(index);
});
} else if (eventName == 'edit'){ //编辑
// 输出框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType: 0,
value: tr.username, //设置输入框的值
},function (value,index) { //layer的方法
// 修改指定单元格的值
// value 表示输入的值
obj.update({
username:value
});
//关闭弹出层
layer.close(index);
})
}
});
/**
* 监听单元格编辑事件
* 表头设置edit属性 单元格编辑类型 (默认不开启) 目前只支持: text(输入框)
*
*/
table.on('edit(test)', function(obj) {
console.log(obj);
console.log("didndid");
//获取修改后的值
var value = obj.value;
// 得到当前修改的tr 对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
//
layer.msg("[ID:" + data.id + "]的" + field + "字段的值修改为:" + value);
});
/**
* 给指定元素绑定事件
*/
$(document).on('click', '#searchBtn', function(data) {
// 获取搜索文本框对象
var search = $("#demoReload");
//调用数据表格的重载方法 table.reload(ID,options)
table.reload('demo', {
where:{//设置需要传递的参数
id: search.val(),
name: "zhangsan"
},
page: {
//表示让条件查询从第一页开始，
// 如果为未设置则从当前页开始查询，此页前面的所有的数据不纳入筛选
curr: 1 //从第一页开始
}
})
});
})
</script>
</body>
</html>
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)