easyUI 滚动条

@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.zzzyk.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

补充：web前端 , JavaScript ,