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="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内容,正常显示出来。

原文地址:https://www.cnblogs.com/seawaving/p/4894852.html