在使用easyui datagrid在tab中遇到的问题

当切换tab时,数据加载了,但是table的宽和高不能不能够初始化。

郁闷了好久解决了这个问题:

在页面加载时和切换tab时,获取当前tab的名字,进行内容的初始化

$('a[name="mainTab"]').on('shown.bs.tab', function(e) {
  // 获取已激活的标签页的名称
  selectTabName = $(e.target).text();
  selectTab(selectTabName);
});

 

//根据标签页刷新页面
function selectTab(selectTabName){
	if(selectTabName == '设备统计'){
		//设备统计列表
		initDeviceCountTable();
	}else if(selectTabName == '与LLDP对比'){
		//对比表
		initCompareTable();
	}
}

  

<ul class="nav nav-tabs">
	<li class="active">
	  <a href="#manage" data-toggle="tab" name="mainTab">设备管理</a>
	</li>
	<li >
	  <a href="#count" data-toggle="tab" name="mainTab">设备统计</a>
	</li>
	<li >
	  <a href="#compare" data-toggle="tab" name="mainTab">与LLDP对比</a>
	</li>
</ul>

<div class="tab-content" id="mytabContent">
  <div class="tab-pane fade in active " id="manage">
    <!--设备管理的内容-->
    <%@include file="deviceManage.jsp"%>
  </div>
  <div class="tab-pane fade " id="count">
    <!-- 设备统计列表 --> 
    <%@include file="deviceCount.jsp"%>
  </div>
  <div class="tab-pane fade" id="compare"> 
    <!-- 与LLDP对比列表-->
    <%@include file="deviceCompare.jsp"%> 
  </div> 
</div>

  

  

猜你喜欢

转载自www.cnblogs.com/wgl0126/p/9224712.html