easyUI 滚动条

@author YHC

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

转载注明地址:thanks!

废话不多说直接上代码:

@author YHC

//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只是不可视但是位置还是占有的,所以出现滚动条;

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

easyUI 滚动条相关推荐

easyUI 滚动条隐藏
easyUI隐藏滚动条当一个table列表中显示出多个滚动条时,该如何隐藏滚动条呢? 1.先看图,看是不是小编这种格式,如果是,可以参照解决方式是,通过 :style="height:5 ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
EasyUI TreeGrid滚动条异常
当使用treeGrid并且只需要显示一列数据的时候,不论Treegrid是HTML里标记的,还是js初始化的,都不要使用冻结列,不然就可能出现滚动条异常的情况. 在此做下记录. 原文来源: easyU ...
easyui tabs 使用iframe 出现两个垂直滚动条解决方法
最近在使用easyui-tabs加iframe时,出现了两个垂直滚动条的现象,如下图所示前端代码如下: <div id="infoDlg" class="easy ...
easy-ui实现左右滚动条
添加fitColumns:false,为列添加width值
第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
datagrid底部显示水平滚动_easyUI datagrid 横向滚动条显示问题
//easyUI默认出现滚动条 function defaultHaveScroll(gridid){ var opts=$('#'+gridid).datagrid('options'); // a ...
easyUI与选择WebUI
easyUI与选择WebUI 作者:sagahu@163.com,2013-03-25,太原关键字:easyUI, 选择WebUI 一.前言当今网上有了很多的WebUI库,也有很多的网页开发使用这 ...
EasyUI中Datagride数据网格的简单使用
场景效果数据网格(DataGrid)属性该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性. 名称类型描述默认值 columns array 数据网格(data ...

easyUI 滚动条

easyUI 滚动条相关推荐

最新文章

热门文章