• easyui的浮动panel不跟随所在页面一起滚动的问题


      项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括combo,combobox,databox,combogird等等,都会出现点开的panel面板正常,如果页面有滚动条,一用鼠标滚轮滚动页面,panel的位置就一直固定在原来的位置,不会随着它所属的控件一起移动。由于我们项目是自己修改过easyui的,所以我怀疑的改出来的问题,我就换上原版的easyui就没这个问题了,证明怀疑是对的。

      还发现同样一个页面,有个页面有这样的问题,有个页面没有这样的问题,这两个页面唯一的区别就是有问题的页面用easyui-layout渲染了的。一开始我以为是layout控件修改错了,但经过层层排查后发现问题不出在这里。

      我单独建了个页面把用到的easyui控件js源码一个一个单独加载,不一下子加载全部,这样经过排除法终于确定错误是在jquery.combo.js上的问题了。然后再仔细阅读源码确定问题在showPanel这个方法上。对比改动发现原来是这么回事:

      

    //没有改过的easyui伪代码
    function showPanel(){
        //上面代码省略
        function getLeft(){...}//获得所属控件的left相对位置
        function getTop(){...}//获得所属控件的top相对位置
    
        //亮点来了
        (function(){
            if(panel.is(':visible')){//如果panel在显示
                panel.panel('move',{
                    left:getLeft(),    
                    top:getTop()    
                });//计算所属控件的位置,然后移动到那个位置
                setTimeout(arguments.callee,200);//0.2秒后再执行本方法
            }  
        })();          
    } 

    原来的代码只要panel打开就会不停的计算位置然后移动过去,而我们改动会的代码把这个方法只执行了一遍,没有进行循环。所以造成了这个问题。

    那么为什么又和layout控件扯上关系了呢,经过排查发现,经过layout控件渲染后里面的div的样式属性overflow会变成auto,也就是说里面的div会有滚动条,而不用layout渲染的话滚动条会出现在最父级iframe级别上。而panel的定位位置是根据iframe级的相对位置而定的。所以前一种情况下,滚动是里面的div,而panel定位在全局上位置没变,所以会显现出问题,而后一种情况,滚动的时候,相当于是全局一起滚动,所以就算panel位置不变也没关系,所以没有出现这样的问题。

      我想之前把代码改成不循环计算可能是出于性能考虑,而且也没遇到用layout渲染的情况,就这样改了。但是我认为这个性能花费并不大,因为只是打开的时候才计算,只要鼠标点其他地方panel都不关闭的,我就把代码改成要循环计算的了。解决问题。

  • 相关阅读:
    CSS选择器之伪类选择器(元素)
    CSS选择器之基本选择器+属性选择器
    bugku 点击1000000次
    bugku web 5
    bugku 矛盾 30
    bugku 域名解析题 50
    bugku 好多压缩包
    六子冲 模拟棋盘
    poj3126 Prime Path(c语言)
    poj1426 Find The Multiple(c语言巧解)
  • 原文地址:https://www.cnblogs.com/onlywujun/p/3818096.html
Copyright © 2020-2023  润新知