LayUI 学习 02 —— 内置组件、LayUImini
系列文章
LayUI 学习 01 —— 快速使用、页面元素
LayUI 学习 02 —— 内置组件、LayUImini
文章目录
- 系列文章
- 四、内置组件
-
- 4.1、Layer
- 4.2、日期和时间选择
- 4.3、分页
- 4.4、数据表格
-
- 1、方法渲染
- 2、自动渲染
- 3、常用参数及使用
-
- 1. 头部工具栏-toolbar
- 2. 行工具栏-toobar
- 3. 行内编辑-edit:'text'
- 4. 表格重载
- 五、LayUI mini
四、内置组件
4.1、Layer
Layer是LayUI的代表作，很多时候即便我们不用LayUI都会直接去用Layer，所以Layer既能作为独立组件使用，也能作为LayUI模块使用。这里我们用LayUI模块的方式。
<script src="../static/layui/layui.js">script>
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.msg("Hello LayUI!");
});
script>
效果：
这里简单说几个常用的方式，具体还是要看文档，弹出层的东西非常多。
1、基本参数
我们提到的基础参数主要指调用方法时用到的配置项，如：
layer.open({content: ''})、layer.msg('', {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。
-
type：基本层类型，传一个Number。
可传入的值有：0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
-
title：标题，传String/Array/Boolean，默认’信息’。
title支持三种类型的值：普通字符串（title:‘字符串’）、自定义样式（title:[‘文本’,‘写任意CSS样式’]、不显示标题(title:false)
-
content：内容，传String/Dom/Array，默认’ ’
content可传入的值是多变的，不仅可以传入普通HTML内容，还能传DOM。
-
area：宽高，默认是auto，可以用
area:['500px', '300px'] -
skin：皮肤，可以传入自定义的class。内置有
layui-layer-lan和layui-layer-molv -
icon：图标，信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
//eg1 layer.alert('酷毙了', { icon: 1}); //eg2 layer.msg('不开心。。', { icon: 5}); //eg3 layer.load(1); //风格1的加载 -
anim：弹出动画，可设置0-6。
-
maxmin：最大最小化，只对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可。
-
fixed：固定在可视区域，fixed:true。
-
success：成功回调方法、yes：确认回调方法、cancel：右上角关闭按钮触发的回调等等。
layer.open({ content: '测试回调', success: function(layero, index){ console.log(layero, index); }, yes: function(index, layero){ //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 }, });
2、常用内置方法
-
layer.open(options) - 原始核心方法
用于打开一个层，会返回一个index，后续要关闭就是利用index。同时，open是后面方法的基础。
-
layer.alert(content, options, yes) - 普通信息框
layer.alert('只想简单的提示'); //eg2 layer.alert('加了个图标', { icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。 //eg3 layer.alert('有了回调', function(index){ //do something layer.close(index); }); -
layer.confirm(content, options, yes, cancel) - 询问框
//eg1 layer.confirm('is not?', { icon: 3, title:'提示'}, function(index){ //do something layer.close(index); }); //eg2 layer.confirm('is not?', function(index){ //do something layer.close(index); }); -
layer.msg(content, options, end) - 提示框
//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 }); -
layer.load(icon, options) - 加载层
//eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = layer.load(2, { time: 10*1000}); //又换了种风格，并且设定最长等待10秒 //关闭 layer.close(index); -
layer.tips(content, follow, options) - tips层
//eg1 layer.tips('只想提示地精准些', '#id'); //eg 2 $('#id').on('click', function(){ var that = this; layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可 }); //eg 3 layer.tips('在上面', '#id', { tips: 1 }); -
layer.close(index) - 关闭指定层
-
layer.closeAll(type) - 关闭所有层
下面简单演示一下5种不同层。
- 信息层
<script src="../static/layui/layui.js">script>
<script>
layui.use('layer', function(){
var layer = layui.layer;
//信息框
layer.open({
type: 0,
title: "标题",
content: '传入任意的文本或html'
});
});
script>
-
页面层
<script src="../static/layui/layui.js">script> <script> layui.use('layer', function(){ var layer = layui.layer; //页面层 layer.open({ type: 1, title: "标题", content: "Hello, Layer" }); }); script>
-
iframe层
<script src="../static/layui/layui.js">script> <script> layui.use('layer', function(){ var layer = layui.layer; //iframe层 layer.open({ type: 2, title: false, //iframe层的content是一个URL，no表示不出现滚动条 content: ["htttp://www.baidu.com","no"] }); }); script>
-
tips层
<button id="btn">按钮button> <script src="../static/layui/layui.js">script> <script> layui.use('layer', function(){ var layer = layui.layer; //tips层 layer.open({ type: 4, //绑定到一个元素上 content: ['内容', '#btn'] }); }); script>
4.2、日期和时间选择
和Layer一样，可以独立使用也可以作为LayUI模块使用。需要依赖模块layerdate。
快速上手：
<div class="layui-input-inline">
<input type="text" class="layui-input" id="date">
div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#date' //指定元素
});
});
script>
效果：
基础参数选项：
1、elem-绑定元素：必填项，一般用作选择器。
2、type-控件选择类型：year-只能选年、month-只能选年月、date-可选年月日、time-只能选时分秒、datetime-都选
3、range - 开启左右面板范围选择：range: true //或 range: ‘~’ 来自定义分割字符
4、format - 自定义格式：例如format: ‘yyyy年MM月dd日’ 可任意组合
5、value - 初始值：必须遵循format
6、theme - 主题：theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
4.3、分页
需要加载模块laypage，laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
<div id="test1">div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 100 //数据总数，从服务端得到
});
});
script>
效果：
基本参数：
jump 切换分页的回调：当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
下面是一个完整版分页。
<div id="page">div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
count: 100, //数据总数，从服务端得到
groups: 10, //连续出现的页码个数
layout: ['prev', 'page', 'next', 'limit', 'count'],//自定义排版
limits: [5,10,20],//如果 layout 参数开启了 limit，则会出现每页条数的select选择框
jump: function (obj, first) {
//obj包含当前分页的所有参数
console.log(obj.curr);//得到当前页，以便向服务器请求对应页的数据
console.log(obj.limit);//得到每页显示的条数
if (!first){
//第一次不执行
//do something
}
}
});
});
script>
效果：
4.4、数据表格
数据表格是LayUI最核心的组件之一，它就是一个动态表格，可以将我们后台的数据渲染到前台。数据表格有三种使用方式，方法渲染、自动渲染和转换静态表格。由于转换静态表格不太常用，这里主要说前两种。需要table模块
demo.json
{
"code": 0,
"msg": "",
"data": [{
"userId": 1,
"userName": "小白",
"password": "111111",
"phoneNumber": "11122233344"
},
{
"userId": 2,
"userName": "小红",
"password": "111111",
"phoneNumber": "22233344455"
},
{
"userId": 3,
"userName": "小绿",
"password": "111111",
"phoneNumber": "33344455566"
}
]
}
1、方法渲染
<div id="demo">div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('table', function(){
let table = layui.table;
table.render({
elem: '#demo', //绑定ID
url: 'demo.json',//数据来源，即后端传json数据的url
page: true, //开启分页
cols: [[//表头 filed 与JSON的key一致，title是表头，width 宽度，sort自动排序，fixed固定列
{
field: 'userId', title: 'ID', width:80, sort: true, fixed: 'left'}
,{
field: 'userName', title: '用户名', width:80}
,{
field: 'password', title: '密码', width:80}
,{
field: 'phoneNumber', title: '电话号码', sort: true}
]]
});
});
script>
效果：
2、自动渲染
<table class="layui-table" lay-data="{url:'demo.json', page: true}">
<thead>
<tr>
<th lay-data="{field: 'userId', width:80, sort: true, fixed: 'left'}">IDth>
<th lay-data="{field: 'userName', width:80}">用户名th>
<th lay-data="{field: 'password', width:80}">密码th>
<th lay-data="{field: 'phoneNumber', sort: true}">电话号码th>
tr>
thead>
table>
<script src="../static/layui/layui.js">script>
<script>
layui.use('table', function(){
let table = layui.table;
});
script>
效果：
3、常用参数及使用
1. 头部工具栏-toolbar
可传入四种值：
- toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器
- toolbar: ‘
xxx’ //直接传入工具栏模板字符
- toolbar: true //仅开启工具栏，不显示左侧模板
- toolbar: ‘default’ //让工具栏左侧显示默认的内置模板
下面对自定义工具栏模板进行使用
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<br>
<body>
<table id="demo" lay-filter="test">table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中对象</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">选中的数量</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
</div>
script>
<script src="../static/layui/layui.js">script>
<script>
layui.use(['table', 'layer'], function(){
let table = layui.table;
let layer = layui.layer;
table.render({
elem: '#demo', //绑定ID
url: 'demo.json',//数据来源，即后端传json数据的url
page: true, //开启分页
toolbar: "#toolbarDemo",//绑定自定义头部工具栏
cols: [[
{
type:"checkbox", fixed: true},//复选框列
{
field: 'userId', title: 'ID', width:80, sort: true},
{
field: 'userName', title: '用户名', width:80},
{
field: 'password', title: '密码', width:80},
{
field: 'phoneNumber', title: '电话号码',sort: true}
]]
});
/*
头部工具栏监听事件
table.on('toolbar(表格元素的lay-filter)',function(data){
//data.event 表示头部工具栏中按钮设置的lay-event
//data.config.id 是表格设置的ID属性值
});
*/
table.on('toolbar(test)',function(data){
//获取当前表格被选中的记录对象（格式是 {data: Array(x), isAll:false}）
let checkStatus = table.checkStatus(data.config.id);
console.log(checkStatus);
//data.event 表示头部工具栏中按钮设置的lay-event
switch (data.event) {
case 'getCheckData':
//获取被选中的记录的数组
let result = checkStatus.data;
//将JSON数组解析成字符串
layer.alert(JSON.stringify(result));
break;
case 'getCheckLength':
layer.alert("选中的数量为："+checkStatus.data.length);
break;
case 'isAll':
layer.alert('是否全选:'+checkStatus.isAll);
break;
}
});
});
script>
body>
html>
效果：
2. 行工具栏-toobar
这个和头部工具栏位置不一样，是放在cols里的，其他使用方式是相同的。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<br>
<body>
<table id="demo" lay-filter="test">table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
script>
<script src="../static/layui/layui.js">script>
<script>
layui.use(['table', 'layer'], function(){
let table = layui.table;
let layer = layui.layer;
table.render({
elem: '#demo', //绑定ID
url: 'demo.json',//数据来源，即后端传json数据的url
page: true, //开启分页
cols: [[
{
type:"checkbox", fixed: true},//复选框列
{
field: 'userId', title: 'ID', width:80, sort: true},
{
field: 'userName', title: '用户名', width:80},
{
field: 'password', title: '密码', width:80},
{
field: 'phoneNumber', title: '电话号码',sort: true},
{
title: '操作',width:150, align:'center', toolbar: '#barDemo'}//行工具栏
]]
});
//行工具栏
table.on('tool(test)', function(data){
console.log(data);
if (data.event === "delete") {
layer.confirm('真的删除行么', function(index){
data.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);//关闭该弹窗
//向服务端发送删除指令
});
}else if(data.event === "edit"){
//同步更新缓存对应的值 json
data.update({
"userName": "新用户",
"password": "00000",
"phoneNumber": "00000000000"
});
//向服务端发送更新指令
}
});
});
script>
body>
html>
效果：
3. 行内编辑-edit:‘text’
可以在表格里直接进行编辑，对行元素添加该属性。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<br>
<body>
<table id="demo" lay-filter="test">table>
<script src="../static/layui/layui.js">script>
<script>
layui.use(['table', 'layer'], function(){
let table = layui.table;
let layer = layui.layer;
table.render({
elem: '#demo', //绑定ID
url: 'demo.json',//数据来源，即后端传json数据的url
page: true, //开启分页
cols: [[
{
field: 'userId', title: 'ID', width:80, sort: true},
{
field: 'userName', title: '用户名', width:80, edit: 'text'},//行内编辑
{
field: 'password', title: '密码', width:80, edit: 'text'},//行内编辑
{
field: 'phoneNumber', title: '电话号码',sort: true},
]]
});
//行内编辑会触发回调函数 edit()
table.on('edit(test)', function(data){
layer.msg("当前正在编辑的字段名："+data.field+
",之前:"+data.value+",之后："+data.data);
});
});
script>
body>
html>
效果：
4. 表格重载
当我们对表格进行搜索时会用到表格重载。这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取。这里导入了jquery。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<br>
<body>
<div class="demoTable">
搜索ID：
<div class="layui-input-inline">
<input class="layui-input" name="id" id="demoReload">
div>
<button class="layui-btn" id="searchBtn">搜索button>
div>
<table id="demo" lay-filter="test">table>
<script src="../static/layui/layui.js">script>
<script src="../static/js/jquery-3.5.1.min.js">script>
<script>
layui.use(['table', 'layer'], function(){
let table = layui.table;
let layer = layui.layer;
let $ = layui.jquery;//获取jquery对象
table.render({
elem: '#demo', //绑定ID
url: 'demo.json',//数据来源，即后端传json数据的url
page: true, //开启分页
cols: [[
{
type:"checkbox", fixed: true},//复选框列
{
field: 'userId', title: 'ID', width:80, sort: true},
{
field: 'userName', title: '用户名', width:80, edit: 'text'},//行内编辑
{
field: 'password', title: '密码', width:80},
{
field: 'phoneNumber', title: '电话号码',sort: true}
]]
});
//点击搜索按钮后，进入该函数
$("#searchBtn", function () {
//获取搜索框对象
let demoReload = $('#demoReload');
table.reload('demo', {
where: {
//设定异步数据接口的额外参数(这里有一个搜索框，就传该搜索框的id)
id: demoReload.val()
},
page: {
//让条件查询从第一页开始查询，不写则从当前页开始查，此页之前的数据将不纳入条件筛选
curr: 1//重新从第一页开始
}
});//只重载数据
})
});
script>
body>
html>
效果：点击搜索时会刷新表格
