LayUI的Tab選項卡切換顯示對應數據

時間 2019-11-22

標籤 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>