zoukankan      html  css  js  c++  java
  • layui tab 切换 条件判定 刷新当前tab

    新建一个tab

            <div class="layui-tab layui-tab-brief" lay-filter="tab-title">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1" data-val="1">1</li>
                    <li lay-id="2" data-val="1">2</li>
                    <li lay-id="3" data-val="1">3</li>   
                    <li lay-id="4" data-val="1">4</li> 
                    <li lay-id="5" data-val="1">5</li> 
                </ul>
                  <div class="layui-tab-item" id="mode2">
                  </div>
                  <div class="layui-tab-item" id="mode2">
                  </div>
                  <div class="layui-tab-item" id="mode3">
                  </div>
                  <div class="layui-tab-item" id="mode4"  >
                  </div>
                  <div class="layui-tab-item" id="mode5"  >
                  </div>
              </div>
    

    监听tab

        layui.use(['form','layer','laydate','layedit','element','upload','xmSelect'],function(){
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                element = layui.element,
    
            $ = layui.jquery
    
                //监听Tab切换,以改变地址hash值
                element.on('tab(tab-title)', function(){
                    layid = this.getAttribute('lay-id');
                    statusId = this.getAttribute('data-val');
                    
                    //获取条件
                    goodsid = $("#data-id").val();
          
                    var layid_up = layid - 1;
    
                    if(layid_up && goodsid == ""){
    
                        layer.msg("条件不满足", {
                            time : 3000,
                            icon : 10 
                        });   
                        _tabChange('tab-title',layid_up);
                        return false;
                    }else if(goodsid != "" && layid == 2 && statusId == 1){ 
                        this.setAttribute('data-val',2);
                        $.ajax({
                            url:"{:url('ShopJourneyData/read')}",
                            data:{
                                id:goodsid
                            },
                            success:function(res){
                                $("#mode2").append(res);
                            }
                        })
                        return false;
                    }else if(goodsid != "" && layid == 3 && statusId == 1){
                        this.setAttribute('data-val',2);
                        $.ajax({
                            url:"{:url('ShopProduct/read_journey')}",
                            data:{
                                id:goodsid
                            },
                            success:function(res){
                                $("#mode3").append(res);
                            }
                        })
                        return false;              
                    }else if(goodsid != "" && layid == 4 && statusId == 1){
                        this.setAttribute('data-val',2);
                        $.ajax({
                            url:"{:url('ShopProduct/read_notice')}",
                            data:{
                                id:goodsid
                            },
                            success:function(res){     
                                $("#mode4").append(res);
                            }
                        })
                        return false;              
                    }else if(goodsid != "" && layid == 5 && statusId == 1){
                        this.setAttribute('data-val',2);
                        $.ajax({
                            url:"{:url('ShopProduct/read_contract')}",
                            data:{
                                id:goodsid
                            },
                            success:function(res){     
                                $("#mode5").append(res);
                            }
                        })
                        return false;              
                    }
                        return false;
                });
    
                function _tabChange(filter,layid){
                    element.tabChange(filter, layid);
                }
    
          })
    

    刷新tab当前页面

            //重新渲染页面
            window.applyJourney = function(){
                var goodsid = $("#data-id").val();
    
                $.ajax({
                    url:"{:url('ShopJourneyData/read')}",
                    data:{
                        id:goodsid
                    },
                    success:function(res){
                        $("#mode2").empty().append(res);
                    }
                })
            }
    
  • 相关阅读:
    【★】深入BGP原理和思想【第一部】
    自制ACL+DHCP实验(初版)
    自制ACL+DHCP实验(初版)
    交换机端口呈现err-disable的原因
    交换机端口呈现err-disable的原因
    ★不容错过的PPT教程!
    ★不容错过的PPT教程!
    自制STP配置实验
    CCNA+NP学习笔记—交换网络篇
    CCNA+NP学习笔记—交换网络篇
  • 原文地址:https://www.cnblogs.com/corvus/p/14262049.html
Copyright © 2011-2022 走看看