举个应用场景的例子来说明:

在采购单的编辑页面,上方为采购单自身的属性信息,下方使用tabs控件,加入两个tab页,分别为采购明细列表(DataGrid)和审核记录列表(DataGrid),即一个主业务实体携带两个子业务实体的情况,子业务实体中datagrid采用js代码请求后台数据加载并显示。

在采购单编辑页面初始化的时候,使用tabs控件的add方法,设置Content属性为嵌入iframe

function AddSubTab(name, url) {
$("#subTabs").tabs('add', {
title: name,
content: '<iframe id="iframe" scrolling="auto" frameborder="0" src=' + url + ' style="width:100%;height:96%;"></iframe>',
closable: false,
selected: true,
cache: false
});
}

实际情况如下: 第二个tab页正常加载显示,第一个tab页中的datagrid无法显示,其他内容正常,右键选择重新加载则能正常显示 去除其中任何一个tab页,另外一个tab正常显示,颠倒顺序,结果相同,前一个tab页中的datagrid无法显示,监控后台数据,返回正常,JS无报错。

从网上搜到的 easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案http://www.cnblogs.com/hxling/p/3919288.html

 onLoadSuccess:function(data){
if(data.total==0){
var dc = $(this).data('datagrid').dc;
var header2Row = dc.header2.find('tr.datagrid-header-row');
dc.body2.find('table').append(header2Row.clone().css({"visibility":"hidden"})); }
}

测试有效,不过仅适用无数据情况下,把表头给显示出来,其原理也是强制显示。

此外,测试了下结构类似的系统主菜单,在快速点击功能导航树,在主区域生成多个tab页,存在datagrid同样存在无法显示的问题(点击速度足够快的情况才发生)。

从现象上看,很像是datagrid控件拿到后台json数据后,进行显示处理时被中断了,很可能是控件自身的一个BUG。

easyui的源码混淆过了,从源码上找问题难度太大,有没有清楚问题出在哪?如何解决?

最后,自己摸索出一种既能间接实现目的又简便的方法,即动态添加tab页时,设置select属性为false,这样所有的tab页都为未选中状态,最后添加一行选择函数,选中第一个tab页,这样用户看到的效果就是自动加载了第一个tab内容,正常显示出来。

easyui datagrid 诡异的无法显示问题的更多相关文章

  1. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  2. EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel

    首先,最近在搞那个DataGrid的导出,发现,网上的用JS导出到本地的方法虽然可用,但是只能导出DataGrid当前的数据,例如说,DataGrid默认是最大显示50行,但是如果有多页,那么就无法显 ...

  3. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  4. EasyUI datagrid列隐藏与显示

    隐藏DataGrid某一列 $("#datagrid_view").datagrid('hideColumn', filed); 2. 显示DataGrid隐藏的某一列 $(&qu ...

  5. 统计easyui datagrid某列之和显示在对应列下面

    项目需求要在表格下面加一行统计求和的,结果网上搜寻了一堆,要么说的不详细,高深大牛们的见解:要么实现不了,搜寻老半天修改出一个可以用的,做一下学习记录,新手菜鸟,欢迎指正和新解决方案. 最终效果图: ...

  6. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  7. EasyUI datagrid组件绑定有转义字符的json数据出错

    最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...

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

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

  9. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

随机推荐

  1. echart折线图,柱状图,饼图设置颜色

    转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...

  2. echart提示框内容数据添加单位

    本文为博主原创,转载须注明转载地址: 方法为: tooltip : { trigger: 'axis', formatter: '{a0}:{c0}%' }, legend: { data:['测试' ...

  3. UVa 1630 串折叠

    https://vjudge.net/problem/UVA-1630 题意: 给出一个由大写字母组成的长度为n的串,折叠成一个尽量短的串.例如:AAAAAAAAABABABCCD折叠成9(A)3(A ...

  4. cartographer安装--Ubuntu14.04--indigo

    0.安装所有依赖项 sudo apt-get install -y google-mock libboost-all-dev  libeigen3-dev libgflags-dev libgoogl ...

  5. python 集合交集

    #Intersection setx = set(["green", "blue"]) sety = set(["blue", " ...

  6. Navicat+Premium+12+破解补丁

    链接:https://pan.baidu.com/s/1BsEWQ__X-RQPuw2ymfxhtg 提取码:j2kb

  7. string 和 wstring

    区别: char* wchar_t 一个字节 两个字节 ACSII编码 unicode编码 转换: 1.Windows API WideCharToMultiByte() MultiByteToWid ...

  8. Codeforces 912E - Prime Gift

    912E - Prime Gift 思路: 折半枚举+二分check 将素数分成两个集合(最好按奇偶位置来,保证两集合个数相近),这样每个集合枚举出来的小于1e18的积个数小于1e6. 然后二分答案, ...

  9. Python爬虫Urllib库的基本使用

    Python爬虫Urllib库的基本使用 深入理解urllib.urllib2及requests  请访问: http://www.mamicode.com/info-detail-1224080.h ...

  10. android--------热修复介绍

    热修复技术在近年来飞速发展,尤其是在InstantRun方案推出之后,各种热修复技术竞相涌现.国内大部分成熟的主流APP都拥有自己的热修复技术,像手淘.支付宝.QQ.饿了么.美团等等. 代码热修复是最 ...