Easyui 多个标签联动_easyui 弹框显示多个tab-优快云博客

本文介绍如何在EasyUI中实现多个tabs组件之间的联动，通过使用全局变量控制onSelect事件来避免死循环，并解决了初始化时可能出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Easyui中，实现多个easyui-tabs联动

1.关键是避免出现死循环现象，因为点击任何一个easyui-tabs的tab都要关联到其它easyui-tabs相对应的tab，采用全局变量控制；

2.由于采用了onSelect事件，在控制初始化时，要注册onSelect事件，为了避免执行关联代码，采用全局变量控制；

HTML代码：

<div data-options="region:'center',border:false" title="">
    <div id="private_tt" class="easyui-tabs" data-options="onSelect:selPrivateTab" style="">
        <div id="p_currency" title="货币" style="padding:5px;">
            tab1
        </div>
        <div id="p_cust_cls" title="客户类别" style="padding:5px;display:none;">
            tab2
        </div>
        <div id="p_op_cls" title="操作员类别"  style="padding:5px;display:none;">
            tab3
        </div>
        <div id="p_brk_cls" title="经纪人类别"  style="padding:5px;display:none;">
            tab4
        </div>
        <div id="p_agt_cls" title="代理人类别" style="padding:5px;display:none;">
            tab5
        </div>
        <div id="p_corp_cls" title="结算法人类别" style="padding:5px;display:none;">
            tab6
        </div>
    </div>
</div>
<div data-options="region:'south',border:false" title="">
    <div id="global_tt" class="easyui-tabs" data-options="onSelect:selGlobalTab" style="height:160px;">
        <div id="g_currency" title="货币" style="padding:5px;">
            tab1
        </div>
        <div id="g_cust_cls" title="客户类别" style="padding:5px;display:none;">
            tab2
        </div>
        <div id="g_op_cls" title="操作员类别"  style="padding:5px;display:none;">
            tab3
        </div>
        <div id="g_brk_cls" title="经纪人类别"  style="padding:5px;display:none;">
            tab4
        </div>
        <div id="g_agt_cls" title="代理人类别" style="padding:5px;display:none;">
            tab5
        </div>
        <div id="g_corp_cls" title="结算法人类别" style="padding:5px;display:none;">
            tab6
        </div>
    </div>
</div>

var g_sel=0;  //tabs初始化时,进入onSelect函数后,跳出函数
var g_pindex = 0;  //从私有标签点击进入计数
var g_gindex = 0;  //从全局标签点击进入计数

//私有权限标签
function selPrivateTab(title,index){
    if(g_sel==0 && index==0){
        //初始化标签时进入
        return;
    }else if(g_sel>0){
        //控制联动标签只onSelect一次,避免进入死循环
        g_pindex++;
        if(g_pindex == 1&& g_gindex==0){
            $('#global_tt').tabs('select',index);
        }else{
            g_pindex=0;
            g_gindex=0;
        }
    }
}

//全局权限标签
function selGlobalTab(title,index){
    if(g_sel==0 && index==0){
        //初始化标签时进入
        g_sel++;   //全部标签初始化结束
        return;
    }else if(g_sel>0){
        //控制联动标签只onSelect一次,避免进入死循环
        g_gindex++;
        if(g_gindex==1 && g_pindex==0){
            $('#private_tt').tabs('select',index);
        }else{
            g_pindex=0;
            g_gindex=0;
        }
    }
}

可以解决死循环问题，解决初始化时，出现“未定义的'options'被调用的问题。