@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上的:
