easyui datagrid 诡异的无法显示问题

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

在采购单的编辑页面,上方为采购单自身的属性信息,下方使用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的源码混淆过了,从源码上找问题难度太大,有没有清楚问题出在哪?如何解决?

时间: 2024-10-22 22:32:22

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

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

项目需求要在表格下面加一行统计求和的,结果网上搜寻了一堆,要么说的不详细,高深大牛们的见解:要么实现不了,搜寻老半天修改出一个可以用的,做一下学习记录,新手菜鸟,欢迎指正和新解决方案. 最终效果图: JS代码 editcount = 0; var objTable=$("#personManage"); objTable.datagrid({ pagination: true, pagePosition:'bottom', onLoadSuccess: compute,//加载完毕后执

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

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

datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借助于formatter来格式化时间格式 { title: '活动开始时间', field: 'BeginTime', width: 300, editor: { type: 'datetimebox', options: { required: true }, formatter: function

Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你会发现,如果Rownumber越来越大,达到三位数或者四位数的时候,Rownumber就显示不全了.这个问题纠结了不知道多少人,在群里和论坛里面都的都被问到无数次了. 以前也一直没有太认真考虑过要解决这个问题,恰好最近有点时间,就研究了一下,其实要解决也很简单,扩展一个方法就行了. 首先,从data

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

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

Easyui Datagrid 修改显示行号列宽度

EasyUI中Datagrid的第一列显示行号,可是如果数据量大的的时候,显示行号的那一列数据会显示不完全的. 可以通过修改Datagrid的样式来解决这个问题,在样式中加入下面这个样式,就可以自己修改显示行号列的宽度了 .datagrid-header-rownumber,.datagrid-cell-rownumber{ width:40px; }

【解决方法】EasyUI DataGrid无数据时不显示滚动条问题

在dataGrid的定义中添加如下代码: JavaScript Code 1 2 3 4 5 6 7 8 9 10 11 onLoadSuccess : function (data) { if (data.total == 0) { $('#dg').datagrid('insertRow', { row : {} }); $("tr[datagrid-row-index='0']").css({ "visibility" : "hidden"

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1.Html代码 1 <script type="text/javascript" src="/js/easyui/jquery.min.js"></script> 2 <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 3 <script type="tex

Easyui datagrid 显示隐藏列

html: <div style="float: left; width: 1450px; height:auto;  "> <table id="List" class="easyui-datagrid" title="基站信息列表" width="1450px" style="height:580px;" data-options="rownumbers: