7月新的開始 - LayUI的基本使用 - Tab選項卡切換顯示對應資料
阿新 • • 發佈：2019-07-26
LayUI tab選項卡+page展示
要求：實現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>