zoukankan      html  css  js  c++  java
  • 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内容,正常显示出来。

  • 相关阅读:
    博客园的界面设置
    ARM 汇编指令集
    winfroms更换皮肤
    面向对象的七项设计原则
    S2-01
    机票查询与订购系统
    重点语法
    第二章
    一、17.09.13
    习作
  • 原文地址:https://www.cnblogs.com/seawaving/p/4894852.html
Copyright © 2011-2022 走看看