在使用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>