在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>
js
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'被调用的问题。