当切换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>

  

  

在使用easyui datagrid在tab中遇到的问题的更多相关文章

  1. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  2. 在使用easyui,datagrid时,JSON中的如果含有换行符,则不能显示数据

    http://www.xuebuyuan.com/2103538.html 每项值需处理换行符 item = item.Replace("\r\n", ""); ...

  3. easyui在当前tab中直接加载url

    var tab = $('#mainTabs').tabs('getSelected'); // get selected panel $('#mainTabs').tabs('update', { ...

  4. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...

  5. jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  6. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  7. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  8. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

  9. EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序

    说明一下: 当点击 datagrid 表头某一列的小三角图标时,easyui 本身是有排序的,但是在当我们对 datagrid 进行了分页的情况下,点击排序只是对当前页的数据进行排序,而需求需要我对数 ...

随机推荐

  1. python与图灵机器人交互(ITCHAT版本)

    #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/9/5 17:42import requestsimport ...

  2. npm run build 打包项目,图片等资源使用相对路径会出现路径错误的问题

    在build下的utils.js中,3使用 ‘vue-style-loader’ 依赖的地方添加 publicPath: '../../' , 如图:

  3. 手机上怎么去掉a 标签中的img点击时的阴影?

    添加: <style type="text/css"> a { -webkit-tap-highlight-color: transparent; -webkit-to ...

  4. echarts地图的基本使用配置

    一.空气质量图 代码和配置如下: <template> <div class="box"> <div id="map">&l ...

  5. hdu 1703

    #include<stdio.h> #define  N  11000 int a[N]; int main() {     int i,n;     a[1]=0;a[2]=5;a[3] ...

  6. XML概述

    本节要点: 标记语言的定义 XML简介 XML与HTML 比较 XML与数据库比较 XML的特点 XML结构 1          标记语言的定义 “XML.SGML.HTML”中的“ML”(Mark ...

  7. 使用Eclipse进行远程调控

    什么是远程调试,就是在A机器上利用Eclipse单步跟踪调试B机器上的Web应用,当然调试A机器上Web应用也是没有问题的,90%我都是调试本机的Web应用,远程调试的意义我想我不用说了,大家都会想到 ...

  8. mongodb 学习笔记 07 -- 数据备份、恢复

    mongoexport 导出json或者csv格式 mongoimport 导入json或者csv mongodump 导出二进制bson结构数据以及索引信息 mongorestore 导入二进制文件 ...

  9. POJ 2137

    水,dp[i][j][k],设为当前为i个牛,在它喜欢的j个位置,而第一个牛在k个位置,很明显了,其实不过是枚举. #include <iostream> #include <cst ...

  10. iOS库--.a与.framework

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的差别? 静态库:链接时完整地拷贝至可运行文件里.被多次使用就有多份冗余拷贝. 动态库:链接时不复制.程序执行时由系 ...