标签：
方法一:
相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你会发现,如果Rownumber越来越大,达到三位数或者四位数的时候,Rownumber就显示不全了.这个问题纠结了不知道多少人,在群里和论坛里面都的都被问到无数次了. 以前也一直没有太认真考虑过要解决这个问题,恰好最近有点时间,就研究了一下,其实要解决也很简单,扩展一个方法就行了.
首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber.既然有规则可循,那么接下来的扩展就好办了......
下面直接贴出方法的扩展代码:
1 $.extend($.fn.datagrid.methods, { 2 fixRownumber : function (jq) { 3 return jq.each(function () { 4 var panel = $(this).datagrid("getPanel"); 5 //获取最后一行的number容器,并拷贝一份 6 var clone = $(".datagrid-cell-rownumber", panel).last().clone(); //由于在某些浏览器里面,是不支持获取隐藏元素的宽度,所以取巧一下 7 clone.css({ 8 "position" : "absolute", 9 left : -1000 10 }).appendTo("body"); 11 var width = clone.width("auto").width(); 12 //默认宽度是25,所以只有大于25的时候才进行fix 13 if (width > 25) { 14 //多加5个像素,保持一点边距 15 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5); 16 //修改了宽度之后,需要对容器进行重新计算,所以调用resize 17 $(this).datagrid("resize"); 18 //一些清理工作 19 clone.remove(); 20 clone = null; 21 } else { 22 //还原成默认状态 23 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style"); 24 } 25 }); 26 } 27 });
有了方法,那要怎么使用,在什么时候使用呢?答案是:onLoadSuccess事件,所以就有如下,
1 $("#easyui-datagrid").datagrid({ 2 onLoadSuccess : function () { 3 $(this).datagrid("fixRownumber"); 4 } 5 });
方法二:
修改easyui.css中的两个值就可以了。默认是25px
.datagrid-header-rownumber,.datagrid-cell-rownumber{ width:40px; }
到此,就基本已经大功告成,你可以试下效果了.....
Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
标签：
原文地址：http://www.cnblogs.com/sgivee/p/4837082.html
