Easyui Datagrid扩展fixRownumber方法
来源:互联网 发布:淘宝做工瑕疵问题 编辑:程序博客网 时间:2024/06/10 09:42
原创地址: http://www.jeasyuicn.com/easyui-datagrid-extended-fixrownumber-method.html
相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你会发现,如果Rownumber越来越大,达到三位数或者四位数的时候,Rownumber就显示不全了.这个问题纠结了不知道多少人,在群里和论坛里面都的都被问到无数次了. 以前也一直没有太认真考虑过要解决这个问题,恰好最近有点时间,就研究了一下,其实要解决也很简单,扩展一个方法就行了.
首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber.既然有规则可循,那么接下来的扩展就好办了......
下面直接贴出方法的扩展代码:
/** * 重新easyui-datagrid行号自适应 */$.extend($.fn.datagrid.methods, {fixRownumber : function(jq) {return jq.each(function() {var panel = $(this).datagrid("getPanel");//获取最后一行的number容器,并拷贝一份 var clone = $(".datagrid-cell-rownumber", panel).last().clone();//由于在某些浏览器里面,是不支持获取隐藏元素的宽度,所以取巧一下 clone.css({"position" : "absolute",left : -1000}).appendTo("body");var width = clone.width("auto").width();//默认宽度是25,所以只有大于25的时候才进行fix if (width > 25) {//多加5个像素,保持一点边距 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);//修改了宽度之后,需要对容器进行重新计算,所以调用resize $(this).datagrid("resize");//一些清理工作 clone.remove();clone = null;} else {//还原成默认状态 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style");}});}});
有了方法,那要怎么使用,在什么时候使用呢?答案是:onLoadSuccess事件,所以就有如下,
$("#easyui-datagrid").datagrid({onLoadSuccess : function () {$(this).datagrid("fixRownumber");}});
0 0
- Easyui Datagrid扩展fixRownumber方法
- easyui datagrid 扩展方法
- jquery easyui 中扩展datagrid自定义方法
- EasyUI datagrid datetimebox扩展
- easyui datagrid 扩展
- easyui datagrid json扩展
- jquery扩展easyui的datagrid组建,添加loading方法
- easyui datagrid之editor扩展
- easyUI datagrid 查询方法
- easyui-datagrid 实用方法
- datagrid方法扩展
- easyui方法扩展
- EasyUI扩展方法
- 扩展easyui方法
- easyui datagrid editors扩展之combogrid
- easyui datagrid editors扩展之combogrid
- easyui扩展datagrid格子移动功能
- 学习easyUI 扩展的Editable DataGrid组件
- gyp.main执行过程
- 输入一个不定长度的数字字符串,将其中的数字提取出来并保存在数组中。
- WINCE6.0深入理解TOC
- java+HTTP+SSL+JSON
- 5、分布式文件系统
- Easyui Datagrid扩展fixRownumber方法
- elasticsearch集群的部署
- HDU2095 find your present (2)【水题】
- phpSQL注入的简单解决办法
- 关于erlang打包升级相关文档汇总
- 孙其功陪你学之——基于IDEA使用Spark API开放Spark程序(3)
- Html学习笔记(一)
- Perl: 运行system `cp $file $dir`错误:perl cp missing destination file operand after
- JAVA回调函数的理解