Easyui Datagrid扩展fixRownumber方法

原创地址：  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");
	}
});