7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据

要求:实现tab选项卡改变的同时展示数据也跟着改变
实现条件:
1、选项卡【官网 – 文档/示例 – 页面元素 – 选项卡】
2、数据表格【官网 – 文档/示例 – 内置模块 – 数据表格】
3、分页【官网 – 文档/示例 – 内置模块 – 分页】

具体实现过程:

1、 先找选项卡、使用默认的tab、然后查看代码、复制对应的代码。

2、 然后改成自己想要显示效果、如下:

3、 然后查看具体的代码如下:

4、 获取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获取即可、具体如下:

5、 数据展示 (分页加载数据)
到这一步、基本工作完成了、效果也是OK。那么要实现Tab选项卡切换的时候、数据展示为我们自己的数据、同时根据选项卡状态的不同、展示不同的数据。那么该如何操作呢?其实很简答的,在每一个的div中加入数据展示表格table即可;然后再加分页的代码。
分页如何加载、请看我的另外一篇文章。地址:https://www.cnblogs.com/laowenBlog/p/11240503.html


6、 到这一步、运行查看效果会发现默认的所有订单数据是OK了、但是切换选项卡、其他的数据确没有显示。具体如下图:


7、 解决显示对应数据
那么这没有数据又该如何解决呢?很简单、会发现在table.rander加载的时候、只是将数据展示在全部订单中了、(通过代码elem: '#order_all'来体现)、那如何展示在应该展示的位置上呢?会发现我们已经在每一个table上给增加了id属性、只要修改elem参数的值即可。那该如何解决这个问题呢?怎么让它成动态的呢?很简单、只需将table.rander写在一个方法中、每一次切换选项卡的时候调用即可。
8、 最终实现效果如下:

9、 具体代码
<!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>

原文地址:https://www.cnblogs.com/laowenBlog/p/11252812.html

时间: 2024-10-13 06:22:39

7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据的相关文章

layui学习--tab选项卡

var element; var $; layui.use(['element','jquery'],function(){ element = layui.element, $ = layui.jquery; //监听左侧菜单点击 element.on('nav(left-menu)', function(elem){ alert(elem.context.attributes+"sss"); addTab(elem[0].innerText,elem[0].attributes[1

Azure 10月新公布

Azure 10月新发布:F 系列计算优化实例,认知服务,媒体服务流式处理单元更名,Azure 镜像市场,FreeBSD 适用于Azure 虚拟机的全新 F 系列计算优化实例 Azure 虚拟机的全新系列 F 系列专为计算密集型工作负荷优化设计,它基于 2.4 GHz Intel Xeon E5-2673 v3 (Haswell) 处理器,可达到接近 Intel Turbo Boost Technology 2.0 高达 3.2 GHz 的时钟速度.这些大小不仅具有与 Dv2 系列相同的 CPU

Azure 12 月新公布

Azure 12 月新发布:人脸识别 API 推出更新,媒体服务当前几种计量方式的调整,Azure Media Redactor 提供预览, Azure 密钥保管库开始计费, 和 Azure 支付方式的更新 认知服务:人脸识别 API 推出 Person Group 更新(公共预览) 在当前推出的公开预览版中,认知服务人脸识别 API 进行了一项更新,允许通过购买更多人脸图片,让开发者存储多达 100,000 人.有关定价的详细信息,请访问定价网站.要了解认知服务的详细信息,请访问认知服务网页.

php 获取优酷视频的真实地址(2014.6月新算法)

上个礼拜发现优酷改版了,各种过滤优酷广告的插件都失效了,于是我百度了一下(谷歌也不能用了)发现优酷改算法了,在ckplayer论坛发现有人在6月25号发了个php 的优酷代理文件,下载下来发现,能用但只能获取mp4格式的视频地址,而且php还加密了,没办法查看源码,后来通过微盾解密发现其中的源码,结合以前自己写的一个优酷视频解析类.... 感谢    3shi大大 具体分析请见 3shi大大的文章  优酷视频真实地址解析  (当然现在不能用了,主要看分析) ps.  新算法是从别人那里解密出来的

Azure 1 月新公布

Azure 1 月新发布:Microsoft Power BI Embedded 公共预览和计算机视觉 API 标准版的更新以及 Azure IoT 网关 SDK 和中心设备管理新功能正式发布以及关于计量名称变更的通知 Microsoft Power BI Embedded 公共预览 Microsoft Power BI Embedded 现已提供公共预览版.Power BI Embedded 是一种 Azure 服务,它支持应用程序开发人员在面向客户的应用中嵌入极好的完全交互式报告和可视化效果

2月新网互联域名总量减至28.1万个 份额跌至3%

IDC评述网(idcps.com)03月16日报道:根据WebHosting.info最新数据显示,截止至2015年03月02日,新网互联域名总量降至281,386个.在2月期间(2015-02-03至2015-03-02),降速加快,共净减4,423个,受此影响,国内外份额纷纷下跌. (图1)2月新网互联域名注册量走势 从图1中可知,在2月份,新网互联域名总量整体呈下降趋势,期间降速加快.接下来,请看由IDC评述网整理的数据分析. (图2)新网互联域名增长数据 纵观图2,在2月,新网互联域名总

Azure 2 月新公布

Azure 2 月新发布:关于虚机和云服务的降价通告,Azure SQL 数据仓库正式发布,Microsoft 认知服务:人脸识别 API 定价模式和名称更新,以及计量名称变更 关于虚机和云服务的降价通告 为了以更优化的市场价格提供 Azure 创新服务,自 2 月 1 日起,世纪互联运营的 Microsoft Azure 服务会在所有数据中心进一步降低某些计算资源服务价格.此次降幅在某些计算资源(虚拟机)高达 60%.随着此次降价,我们 Windows Server 有效 SA(软件增值计划)

layui 的Tab选项卡

http://www.layui.com/doc/element/tab.html <#--start--> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">申请记录</li>

layui从子iframe打开父iframe的tab选项卡

数据表格字段: {field: 'novelId', title: '小说ID',width:100,templet: '<div><a href="javascript:;" _href="/contentManage/content-chapters.html" novelName="{{d.name}}" onclick="showChapters(this,{{d.novelId}});" class