首页 > 安全资讯 >

easyUI 滚动条

12-07-14

@author YHC现在做一个项目用到easyUI,但是easyUI有一个小小的bug就是,列超过了不出现滚动条:转载注明地址:thanks!废话不多说直接上代码:@author YHC[javascript]//easyUI默认出现滚动条function defaultHave...

@author YHC

现在做一个项目用到easyUI,但是easyUI有一个小小的bug就是,列超过了不出现滚动条:

转载注明地址:thanks!


废话不多说直接上代码:

@author YHC


[javascript]
//easyUI默认出现滚动条  
function defaultHaveScroll(gridid){ 
    var opts=$('#'+gridid).datagrid('options'); 
    // alert(Ext.util.JSON.encode(opts.columns));  
    var text='{'; 
    for(var i=0;i<opts.columns.length;i++){ 
       var inner_len=opts.columns[i].length; 
       for(var j=0;j<inner_len;j++){ 
           if((typeof opts.columns[i][j].field)=='undefined')break; 
            text+="'"+opts.columns[i][j].field+"':''"; 
            if(j!=inner_len-1){ 
                text+=","; 
            } 
       } 
    } 
    text+="}"; 
    text=eval("("+text+")"); 
    var data={"total":1,"rows":[text]}; 
    $('#'+gridid).datagrid('loadData',data); 
   // $('#grid').datagrid('appendRow',text);  
   $("tr[datagrid-row-index='0']").css({"visibility":"hidden"}); 

//easyUI默认出现滚动条
function defaultHaveScroll(gridid){
 var opts=$('#'+gridid).datagrid('options');
    // alert(Ext.util.JSON.encode(opts.columns));
    var text='{';
    for(var i=0;i<opts.columns.length;i++){
     var inner_len=opts.columns[i].length;
     for(var j=0;j<inner_len;j++){
      if((typeof opts.columns[i][j].field)=='undefined')break;
       text+="'"+opts.columns[i][j].field+"':''";
       if(j!=inner_len-1){
        text+=",";
       }
     }
    }
    text+="}";
    text=eval("("+text+")");
    var data={"total":1,"rows":[text]};
    $('#'+gridid).datagrid('loadData',data);
   // $('#grid').datagrid('appendRow',text);
   $("tr[datagrid-row-index='0']").css({"visibility":"hidden"});
}
方法是通用的,你copy过去可以直接调用,传入的参数是你的datagrid的ID;

描述以上代码实现原理:

1.为什么easyUI默认不出现滚动条?????

看看这张图:注意(单表头和多表头一样)这里的举例是多表头

 


右边的非锁定列其实是被一个DIV包裹了,单表头就是1个DIV,多表头就是2个DIV,由于他将DIV设置了内容超过的时候才出现滚动条,所以当你初始化没有内容的时候就不会出现滚动条;

2.以上代码如何实现的????

在你初始化之后根据gridID得到你的所有的列信息,拼接一个行json对象,用easyUI载入本地json的方法进行载入数据,在将该行设置为不可视,这样看起来的效果,如果你的行超过了grid的宽度那么就会出现滚动条,否则不会出现滚动条;

3.为什么不用css样式的display而用visibility属性?

display隐藏某个控件之后,不占改位置,也就是位置也取消了,但是visibility属性设置为hidden只是不可视但是位置还是占有的,所以出现滚动条; www.2cto.com

4. $("tr[datagrid-row-index='0']").css({"visibility":"hidden"});代码的解释?

这个代表查找tr的自定义属性datagrid-row-index的值为0的tr元素,如果是多表头就会得到2个tr对象,如果单表头就只有一个,实际上datagrid的每一行就是tr包含td,td又包含div,div中包含数据,所以最终我只需要隐藏tr那么它的所有子元素也随之隐藏不可视,就实现了最终的样式;

以上不是最好的做法,只是暂时的替代方案,贴出来与大家共享,如果大家有更好的解决方案,欢迎提出!

这个是visibility和display的区别的CSS3.0API上的:

 


作者:yhc13429826359
相关文章
最新文章
热点推荐