Web端的Tab控件在切换Tab时Load数据出错的处理

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jcx5083761/article/details/16860245

       我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错的情况有很多种,我做过测试这种情况在Chrome下面没有,IE和Firefox都存在,界面如下:

报错的情况会有很多种,但是究其原因,都是由于在切换Tab1到Tab2的时候,实际上将Tab1的display设置成none了,但是多数控件(比如Hightcharts、Ext、Map控件)在Load数据时如果当前的容器是隐藏状态就会出错。

       解决方案1:切换到Tab2数据加载的时候,出现Working页面,不能够进行其他操作,但这个是垫底的方案,会影响到用户体验,如果此页面加载10秒,这10秒钟内,用户什么都不能做【备用】。

       解决方案2:如果加载出错的情况记录到一个变量中,如果再次切换回此页面,如果发现加载错误,那么重新架加载,这种方案有个弊端是,切换回来时有一段时间的延迟响应,用户会看到出错的页面,再者就是比较难判断出来是否加载出错【不可行】。

       解决方案3:修改Jquery easyui的源码,在切换Tab1到Tab2时,不隐藏Tab1,而是将Tab1的高度置成1,这样有个小问题就是如果Tab太多的情况,很多个1高度的元素会堆积,后来经过测试将Tab1的高度置成0也是可以的,OK,问题解决,代码如下【没有修改jQuery easyui源码,因为压缩后的没法修改,但是也没有找到未压缩的,只是在easyui加载完成后改变Tab的样式】:

$('#divReportTabs').children().last().children().each(function (index)
			{
				var display = $(this).css('display');
				if (tabIndex != index)
				{
					$(this).show().height(0);
				}
			});

此段代码的逻辑就是切换到当前的Tab时,其他的Tab显示但是高度是0px【解决】。

展开阅读全文

Tab控件Tab之间切换混乱

03-08

很简单的一个程序,不知道为什么点击各Tab切换标签时显示出现问题。rn打开程序是显示的是窗口IDD_MainTab1,此时点击Tab2,显示窗口还是为IDD_MainTab1,此时再点击Tab1,显示窗口为IDD_MainTab2,此时再点击Tab2,显示窗口为IDD_MainTab1,此时点击Tab3显示窗口为IDD_MainTab2,此时再点击Tab1,显示窗口为IDD_MainTab3。真的把我搞糊涂了,UpdateTab()应该没错,问题貌似出现在OnSelchanging中。请教各位了,在线等。rnrn代码如下:rnrn[code=C/C++]rnvoid CTestDlg::UpdateTab()rnrn rn m_MainTab.InsertItem(0,"TAB1");rn m_MainTab.InsertItem(1,"TAB2");rn m_MainTab.InsertItem(2,"TAB3");rn page1.Create(IDD_MainTab1,GetDlgItem(IDC_MainTab));rn page2.Create(IDD_MainTab2,GetDlgItem(IDC_MainTab));rn page3.Create(IDD_MainTab3,GetDlgItem(IDC_MainTab));rn CRect rect;rn m_MainTab.GetClientRect(&rect);rn rect.top+=20;rn rect.bottom-=5;rn rect.left+=5;rn rect.right-=5;rn page1.MoveWindow(&rect);rn page2.MoveWindow(&rect);rn page3.MoveWindow(&rect);rnrn m_MainTab.SetCurSel(0);rnrnrnvoid CTestDlg::OnSelchangingMainTab(NMHDR* pNMHDR, LRESULT* pResult) rnrn switch(m_MainTab.GetCurSel())rn rn case 0:rn page1.ShowWindow(SW_SHOW);rn page2.ShowWindow(SW_HIDE);rn page3.ShowWindow(SW_HIDE);rn break; rn case 1:rn page1.ShowWindow(SW_HIDE);rn page2.ShowWindow(SW_SHOW);rn page3.ShowWindow(SW_HIDE);rn break;rn case 2:rn page1.ShowWindow(SW_HIDE);rn page2.ShowWindow(SW_HIDE);rn page3.ShowWindow(SW_SHOW);rn break;rn default:rn break;rn rn *pResult = 0;rnrn[/code] 论坛

没有更多推荐了,返回首页