LayUI的Tab选项卡切换显示对应数据
LayUI tab选项卡 + 分页展现 实现 Tab选项卡切换显示对应数据
要求：实现tab选项卡改变的同时展现数据也跟着改变
实现条件：
一、选项卡【官网 – 文档/示例 – 页面元素 – 选项卡】
二、数据表格【官网 – 文档/示例 – 内置模块 – 数据表格】
三、分页【官网 – 文档/示例 – 内置模块 – 分页】php
具体实现过程：
一、 先找选项卡、使用默认的tab、而后查看代码、复制对应的代码。
二、 而后改为本身想要显示效果、以下：
三、 而后查看具体的代码以下：
四、 获取Tab选项卡的状态值
到目前为止、实现了点击对应的Tab选项卡、展现对应的内容。可是、我如今要展现的订单的状态对应的数据、应拿到对应的每个Tab选项卡的状态值、而后将内容展现在对应的位置。那如何获取每个选项课的状态值呢？
4.1 先给每个Tab选项卡一个自定义属性、用来存放状态值。具体代码以下：
4.2 获取对应的值。在官网手册文档上、咱们能够找到监听Tab切换事件
4.3 获取状态
而后直接copy代码到咱们本身的目录下、而后运行、会发现没有效果。那如何解决呢？仔细看代码、会发现监听的是tab(filter)、那么咱们须要给一个lay-filter。那这个filter给谁呢？仍是回到手册、往上看、会发现事件监听中有一个默认状况下、那咱们和它同样、直接粘在class为layui-tab的div上便可、将filter换成咱们本身的名字。到这一步、运行发现Tab选项卡切换的时候、能够获取到对应的DOM元素、索引、容器等，那咱们如何获取对应的状态码呢？很简单、和jQuery中的写法一致、直接经过attr获取便可、具体以下：
五、 数据展现 (分页加载数据)
到这一步、基本工做完成了、效果也是OK。那么要实现Tab选项卡切换的时候、数据展现为咱们本身的数据、同时根据选项卡状态的不一样、展现不一样的数据。那么该如何操做呢？其实很简答的，在每个的div中加入数据展现表格table便可；而后再加分页的代码。 分页如何加载、请看个人另一篇文章。地址：https://www.cnblogs.com/laowenBlog/p/11240503.html
六、 到这一步、运行查看效果会发现默认的全部订单数据是OK了、可是切换选项卡、其余的数据确没有显示。具体以下图：
七、 解决显示对应数据
那么这没有数据又该如何解决呢？很简单、会发如今table.rander加载的时候、只是将数据展现在所有订单中了、（经过代码elem: '#order_all'来体现）、那如何展现在应该展现的位置上呢？会发现咱们已经在每个table上给增长了id属性、只要修改elem参数的值便可。那该如何解决这个问题呢？怎么让它成动态的呢？很简单、只需将table.rander写在一个方法中、每一次切换选项卡的时候调用便可。
八、 最终实现效果以下：
九、 具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="./layui/layui.js" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的Tab</legend>
</fieldset>
<div class="layui-tab" lay-filter="tab-all">
<ul class="layui-tab-title">
<li data-status="" class="layui-this">所有订单</li>
<li data-status="1">待付款</li>
<li data-status="3">待收货</li>
<li data-status="5">已完成</li>
<li data-status="6">已取消</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table class="layui-hide" id="order_all"></table>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="order_pay"></table>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="order_receive"></table>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="order_finish"></table>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="order_cancel"></table>
</div>
</div>
</div>
<script>
layui.use(['element', 'table'], function () {
// Tab的切换功能，切换事件监听等，须要依赖element模块
var $ = layui.jquery, table = layui.table, element = layui.element;
// 初始化加载
getList('#order_all', '')
// 监听tab切换 操做：文档 - 内置模块 - 经常使用元素操做 element - 监听tab切换
element.on('tab(tab-all)', function (data) {
// console.log(this); // 当前Tab标题所在的原始DOM元素
// console.log(data.index); // 获得当前Tab的所在下标
// console.log(data.elem); // 获得当前的Tab大容器
var status = $(this).attr('data-status')
var position = '#order_all'
switch (status) {
case '1': position = '#order_pay'; break;
case '3': position = '#order_receive'; break;
case '5': position = '#order_finish'; break;
case '6': position = '#order_cancel'; break;
default: position = '#order_all';
}
getList(position, status)
})
// 公共方法
function getList(position, status = '') {
table.render({
elem: position
, method: 'get'
, url: 'http://localhost/php/public/index.php/index/order/getList'
, where: {
status: status
}
, limit: 5
, limits: [2, 3, 5]
, request: {
pageName: 'page' //页码的参数名称，默认：page
, limitName: 'size' //每页数据量的参数名，默认：limit
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'order_id', title: 'ID', sort: true }
, { field: 'order_create_time', title: '订单建立时间' }
, { field: 'order_code', title: '订单编号', sort: true }
, { field: 'goods_id', title: '商品id' }
, { field: 'produt_id', title: '货品id' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'order_product_num', title: '购买的数量', sort: true }
, { field: 'order_price_one', title: '单价', sort: true }
, { field: 'order_price_all', title: '总价' }
, { field: 'statusName', title: '状态', sort: true }
, { field: 'action', title: '操做', sort: true }
]]
, page: true
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data //解析数据列表
};
}
});
}
})
</script>
</body>
</html>
相关文章
- 1. Tab选项卡的切换
- 2. react tab选项卡切换
- 3. Layui的tab选项卡切换时数据表格加载异常
- 4. layui的选项卡添加与切换
- 5. 简单的tab选项卡切换
- 6. Vue实现的Tab选项卡切换
- 7. layui 选项卡没法切换
- 8. react中tab选项卡切换
- 9. vue实现tab选项卡切换
- 10. MUI tab选项卡之间的切换和数据获取
- 更多相关文章...
- • ionic tab(选项卡) - ionic 教程
- • ionic 选项卡栏操作 - ionic 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Tab选项卡的切换
- 2. react tab选项卡切换
- 3. Layui的tab选项卡切换时数据表格加载异常
- 4. layui的选项卡添加与切换
- 5. 简单的tab选项卡切换
- 6. Vue实现的Tab选项卡切换
- 7. layui 选项卡没法切换
- 8. react中tab选项卡切换
- 9. vue实现tab选项卡切换
- 10. MUI tab选项卡之间的切换和数据获取