LayUI的基本使用 - Tab选项卡切换显示对应数据

要求:实现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给谁呢?还是回到手册、往上看、会发现事件监听中有一个默认情况下、那我们和它一样、直接粘在classlayui-tabdiv上即可、将filter换成我们自己的名字。到这一步、运行发现Tab选项卡切换的时候、可以获取到对应的DOM元素、索引、容器等,那我们如何获取对应的状态码呢?很简单、和jQuery中的写法一致、直接通过attr获取即可、具体如下:

5、 数据展示 (分页加载数据)
  1. 到这一步、基本工作完成了、效果也是OK。那么要实现Tab选项卡切换的时候、数据展示为我们自己的数据、同时根据选项卡状态的不同、展示不同的数据。那么该如何操作呢?其实很简答的,在每一个的div中加入数据展示表格table即可;然后再加分页的代码。
  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. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layui</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" href="./layui/css/layui.css" media="all">
  10. <script src="./layui/layui.js" charset="utf-8"></script>
  11. </head>
  12. <body>
  13. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  14. <legend>默认风格的Tab</legend>
  15. </fieldset>
  16. <div class="layui-tab" lay-filter="tab-all">
  17. <ul class="layui-tab-title">
  18. <li data-status="" class="layui-this">全部订单</li>
  19. <li data-status="1">待付款</li>
  20. <li data-status="3">待收货</li>
  21. <li data-status="5">已完成</li>
  22. <li data-status="6">已取消</li>
  23. </ul>
  24. <div class="layui-tab-content">
  25. <div class="layui-tab-item layui-show">
  26. <table class="layui-hide" id="order_all"></table>
  27. </div>
  28. <div class="layui-tab-item">
  29. <table class="layui-hide" id="order_pay"></table>
  30. </div>
  31. <div class="layui-tab-item">
  32. <table class="layui-hide" id="order_receive"></table>
  33. </div>
  34. <div class="layui-tab-item">
  35. <table class="layui-hide" id="order_finish"></table>
  36. </div>
  37. <div class="layui-tab-item">
  38. <table class="layui-hide" id="order_cancel"></table>
  39. </div>
  40. </div>
  41. </div>
  42. <script>
  43. layui.use(['element', 'table'], function () {
  44. // Tab的切换功能,切换事件监听等,需要依赖element模块
  45. var $ = layui.jquery, table = layui.table, element = layui.element;
  46. // 初始化加载
  47. getList('#order_all', '')
  48. // 监听tab切换 操作:文档 - 内置模块 - 常用元素操作 element - 监听tab切换
  49. element.on('tab(tab-all)', function (data) {
  50. // console.log(this); // 当前Tab标题所在的原始DOM元素
  51. // console.log(data.index); // 得到当前Tab的所在下标
  52. // console.log(data.elem); // 得到当前的Tab大容器
  53. var status = $(this).attr('data-status')
  54. var position = '#order_all'
  55. switch (status) {
  56. case '1': position = '#order_pay'; break;
  57. case '3': position = '#order_receive'; break;
  58. case '5': position = '#order_finish'; break;
  59. case '6': position = '#order_cancel'; break;
  60. default: position = '#order_all';
  61. }
  62. getList(position, status)
  63. })
  64. // 公共方法
  65. function getList(position, status = '') {
  66. table.render({
  67. elem: position
  68. , method: 'get'
  69. , url: 'http://localhost/php/public/index.php/index/order/getList'
  70. , where: {
  71. status: status
  72. }
  73. , limit: 5
  74. , limits: [2, 3, 5]
  75. , request: {
  76. pageName: 'page' //页码的参数名称,默认:page
  77. , limitName: 'size' //每页数据量的参数名,默认:limit
  78. }
  79. , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  80. , cols: [[
  81. { field: 'order_id', title: 'ID', sort: true }
  82. , { field: 'order_create_time', title: '订单创建时间' }
  83. , { field: 'order_code', title: '订单编号', sort: true }
  84. , { field: 'goods_id', title: '商品id' }
  85. , { field: 'produt_id', title: '货品id' } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
  86. , { field: 'order_product_num', title: '购买的数量', sort: true }
  87. , { field: 'order_price_one', title: '单价', sort: true }
  88. , { field: 'order_price_all', title: '总价' }
  89. , { field: 'statusName', title: '状态', sort: true }
  90. , { field: 'action', title: '操作', sort: true }
  91. ]]
  92. , page: true
  93. , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
  94. return {
  95. "code": res.code, //解析接口状态
  96. "msg": res.msg, //解析提示文本
  97. "count": res.data.total, //解析数据长度
  98. "data": res.data.data //解析数据列表
  99. };
  100. }
  101. });
  102. }
  103. })
  104. </script>
  105. </body>
  106. </html>

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

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

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

posted @ 2019-09-18 13:58  韦大仙  阅读(4558)  评论(0编辑  收藏  举报