要求：实现tab选项卡改变的同时展示数据也跟着改变

实现条件：

1、 选项卡 【官网 – 文档/示例 – 页面元素 – 选项卡】

2、数据表格 【官网 – 文档/示例 – 内置模块 – 数据表格】

3、分页 【官网 – 文档/示例 – 内置模块 – 分页】

具体实现过程：

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

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

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

4、 获取Tab选项卡的状态值
  1. 到目前为止、实现了点击对应的Tab选项卡、展示对应的内容。但是、我现在要展示的订单的状态对应的数据、应拿到对应的每一个Tab选项卡的状态值、然后将内容展示在对应的位置。那如何获取每一个选项课的状态值呢？
4.1 先给每一个Tab选项卡一个自定义属性、用来存放状态值。具体代码如下：

4.2 获取对应的值。在官网手册文档上、我们可以找到监听Tab切换事件

4.3 获取状态
  1. 然后直接copy代码到我们自己的目录下、然后运行、会发现没有效果。那如何解决呢？仔细看代码、会发现监听的是tab(filter)、那么我们需要给一个lay-filter。那这个filter给谁呢？还是回到手册、往上看、会发现事件监听中有一个默认情况下、那我们和它一样、直接粘在class为layui-tab的div上即可、将filter换成我们自己的名字。到这一步、运行发现Tab选项卡切换的时候、可以获取到对应的DOM元素、索引、容器等，那我们如何获取对应的状态码呢？很简单、和jQuery中的写法一致、直接通过attr获取即可、具体如下：

5、 数据展示 (分页加载数据)
  1. 到这一步、基本工作完成了、效果也是OK。那么要实现Tab选项卡切换的时候、数据展示为我们自己的数据、同时根据选项卡状态的不同、展示不同的数据。那么该如何操作呢？其实很简答的，在每一个的div中加入数据展示表格table即可；然后再加分页的代码。
    2. 

  2. 分页如何加载、请看我的另外一篇文章。地址：https://www.cnblogs.com/laowenBlog/p/11240503.html



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



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

9、 具体代码
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="utf-8">
    6. 

  6.     <title>layui</title>
    7. 

  7.     <meta name="renderer" content="webkit">
    8. 

  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    9. 

  9.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    10. 

  10.     <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    11. 

  11.     <script src="./layui/layui.js" charset="utf-8"></script>
    12. 

  12. </head>
    13. 

    14. 

  14. <body>
    15. 

  15.     <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    16. 

  16.         <legend>默认风格的Tab</legend>
    17. 

  17.     </fieldset>
    18. 

  18.     <div class="layui-tab" lay-filter="tab-all">
    19. 

  19.         <ul class="layui-tab-title">
    20. 

  20.             <li data-status="" class="layui-this">全部订单</li>
    21. 

  21.             <li data-status="1">待付款</li>
    22. 

  22.             <li data-status="3">待收货</li>
    23. 

  23.             <li data-status="5">已完成</li>
    24. 

  24.             <li data-status="6">已取消</li>
    25. 

  25.         </ul>
    26. 

  26.         <div class="layui-tab-content">
    27. 

  27.             <div class="layui-tab-item layui-show">
    28. 

  28.                 <table class="layui-hide" id="order_all"></table>
    29. 

  29.             </div>
    30. 

  30.             <div class="layui-tab-item">
    31. 

  31.                 <table class="layui-hide" id="order_pay"></table>
    32. 

  32.             </div>
    33. 

  33.             <div class="layui-tab-item">
    34. 

  34.                 <table class="layui-hide" id="order_receive"></table>
    35. 

  35.             </div>
    36. 

  36.             <div class="layui-tab-item">
    37. 

  37.                 <table class="layui-hide" id="order_finish"></table>
    38. 

  38.             </div>
    39. 

  39.             <div class="layui-tab-item">
    40. 

  40.                 <table class="layui-hide" id="order_cancel"></table>
    41. 

  41.             </div>
    42. 

  42.         </div>
    43. 

  43.     </div>
    44. 

  44.     <script>
    45. 

  45.         layui.use(['element', 'table'], function () {
    46. 

  46.             // Tab的切换功能，切换事件监听等，需要依赖element模块
    47. 

  47.             var $ = layui.jquery, table = layui.table, element = layui.element;
    48. 

  48.             // 初始化加载
    49. 

  49.             getList('#order_all', '')
    50. 

  50.             // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
    51. 

  51.             element.on('tab(tab-all)', function (data) {
    52. 

  52.                 // console.log(this);        // 当前Tab标题所在的原始DOM元素
    53. 

  53.                 // console.log(data.index);  // 得到当前Tab的所在下标
    54. 

  54.                 // console.log(data.elem);   // 得到当前的Tab大容器
    55. 

  55.                 var status = $(this).attr('data-status')
    56. 

  56.                 var position = '#order_all'
    57. 

  57.                 switch (status) {
    58. 

  58.                     case '1': position = '#order_pay'; break;
    59. 

  59.                     case '3': position = '#order_receive'; break;
    60. 

  60.                     case '5': position = '#order_finish'; break;
    61. 

  61.                     case '6': position = '#order_cancel'; break;
    62. 

  62.                     default: position = '#order_all';
    63. 

  63.                 }
    64. 

  64.                 getList(position, status)
    65. 

  65.             })
    66. 

  66.             // 公共方法
    67. 

  67.             function getList(position, status = '') {
    68. 

  68.                 table.render({
    69. 

  69.                     elem: position
    70. 

  70.                     , method: 'get'
    71. 

  71.                     , url: 'http://localhost/php/public/index.php/index/order/getList'
    72. 

  72.                     , where: {
    73. 

  73.                         status: status
    74. 

  74.                     }
    75. 

  75.                     , limit: 5
    76. 

  76.                     , limits: [2, 3, 5]
    77. 

  77.                     , request: {
    78. 

  78.                         pageName: 'page' //页码的参数名称，默认：page
    79. 

  79.                         , limitName: 'size' //每页数据量的参数名，默认：limit
    80. 

  80.                     }
    81. 

  81.                     , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    82. 

  82.                     , cols: [[
    83. 

  83.                         { field: 'order_id', title: 'ID', sort: true }
    84. 

  84.                         , { field: 'order_create_time', title: '订单创建时间' }
    85. 

  85.                         , { field: 'order_code', title: '订单编号', sort: true }
    86. 

  86.                         , { field: 'goods_id', title: '商品id' }
    87. 

  87.                         , { field: 'produt_id', title: '货品id' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
    88. 

  88.                         , { field: 'order_product_num', title: '购买的数量', sort: true }
    89. 

  89.                         , { field: 'order_price_one', title: '单价', sort: true }
    90. 

  90.                         , { field: 'order_price_all', title: '总价' }
    91. 

  91.                         , { field: 'statusName', title: '状态', sort: true }
    92. 

  92.                         , { field: 'action', title: '操作', sort: true }
    93. 

  93.                     ]]
    94. 

  94.                     , page: true
    95. 

  95.                     , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
    96. 

  96.                         return {
    97. 

  97.                             "code": res.code, //解析接口状态
    98. 

  98.                             "msg": res.msg, //解析提示文本
    99. 

  99.                             "count": res.data.total, //解析数据长度
    100. 

  100.                             "data": res.data.data //解析数据列表
    101. 

  101.                         };
    102. 

  102.                     }
    103. 

  103.                 });
    104. 

  104.             }
    105. 

  105.         })
    106. 

  106.     </script>
    107. 

  107. </body>
    108. 

    109. 

  109. </html>

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

  1. 7月新的开始 - LayUI的基本使用 - 分页

    LayUI 分页处理 数据展示是以表格的形式展示的.使用模块如下: 首先使用内置模块-数据表格 然后使用内置模块-分页 官方文档地址:https://www.layui.com/doc/ 官方示例地址 ...

    LayUI的基本使用 - Tab选项卡切换显示对应数据的更多相关文章

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

      LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

    2. Axure实现Tab选项卡切换功能

      这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

    3. vue实现tab选项卡切换效果

      tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

    4. jQuery实现TAB选项卡切换特效简单演示

      本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

    5. react tab选项卡切换

      Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

    6. 纯CSS实现tab选项卡切换

      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

    7. 下拉菜单效果和tab选项卡切换

      //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

    8. 微信小程序Tab选项卡切换大集合

      代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

    9. 纯js实现网页tab选项卡切换效果

      纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

    随机推荐

    1. 官方一步解决各种Windows更新问题

      原文部分: 修复 Windows 更新问题 适用于: Windows 8.1Windows 10Windows 7   此分布指南有什么作用? 此分步指南提供的步骤可修复 Windows 更新的问题, ...

    2. Azure DevOps Server 经验分享（国内重型工程公司）

      受邀在上海为国内著名的重型工程公司的软件研发团队分享了Azure DevOps Server 的经验. http://www.cnblogs.com/danzhang/  DevOps MVP 张洪君 ...

    3. （六）golang--变量

      什么是变量? 变量相当于内存空间中一个数据存储空间的表示,可以理解为一个门的房牌号:该区域有自己的名称(变量名)和类型(数据类型) 变量的使用步骤:申明--赋值--使用 package main im ...

    4. 在Linux上利用curl 命令模拟 HTTP GET/POST 请求

      本文系转载,原文地址:https://www.cnblogs.com/alfred0311/p/7988648.html 序言 在 Linux 操作系统上对后端程序进行测试的时候,需要进行模拟连接或者 ...

    5. PHP接口并发测试的方法

      PHP接口并发测试的方法 <pre> header('Content-type:text/html; Charset=utf-8'); $uri = "输入你的url" ...

    6. PHP 命名空间笔记

      PHP 命名空间笔记 1.php文件代码如下<pre><?php//我用这样的命名空间表示处于blog下的article模块namespace Blog\Article; class ...

    7. C/C++深度优先搜索(递归树模拟)

      //C++深度优先搜索(递归树模拟) #define _CRT_SECURE_NO_WARNINGS #include <iostream> #define MAX_N 1000 usin ...

    8. Knative 基本功能深入剖析：Knative Eventing 之 Sequence 介绍

      作者 | 元毅,阿里云容器平台高级开发工程师,负责阿里云容器平台 Knative 相关工作. 导读:在实际的开发中我们经常会遇到将一条数据需要经过多次处理的场景,称为 Pipeline.那么在 Kna ...

    9. Logstash之控制台输出的两种方式

      输出json output { stdout { codec => json } } 输出rubydebug output { stdout { codec => rubydebug } ...

    10. C# 打开mpp文件（Microsoft object）问题总结

      有需求就有解决方案,早上还没有听说过什么是 mpp 文件,下午已经能成功的将功能实现,这难道就是程序员的职业素养?哈哈哈哈 从网上找了很多方法,最后自己找到一个十分简单的打开 mpp 文件的方法: p ...