jquery easyui datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字
于是找到了其源码,作了以下一点点修改,解决了这个Bug。具体思路就是当行数超过9999时就动态去改变每行数据第一个格子的宽度
//找到datagrid部分的renderRow这个function,我这里是easyui 1.2.6版本,大概在第7562行
renderRow:function(_56d,_56e,_56f,_570,_571){
var opts=$.data(_56d,"datagrid").options;
var cc=[];
if(_56f&&opts.rownumbers){
var _572=_570+1;
if(opts.pagination){
_572+=(opts.pageNumber-1)*opts.pageSize;//这里算出行号
}
//cc.push("<td class=\"datagrid-td-rownumber\"><div class=\"datagrid-cell-rownumber\">"+_572+"</div></td>");原来的这句注释掉
//----------------------以下是增加的内容---------------------
var cell_width = 25;
if((_572+"").length > 4 && (_572+"").length < 7){
cell_width = 35;
}else if((_572+"").length > 6 && (_572+"").length < 9){
cell_width = 50;
}else if((_572+"").length > 8 && (_572+"").length < 11){
cell_width = 65;
}
cc.push("<td class=\"datagrid-td-rownumber\"><div style='width:"+cell_width+"px' class=\"datagrid-cell-rownumber\">"+_572+"</div></td>");
if($('.datagrid-header-rownumber').width() != cell_width)
$('.datagrid-header-rownumber').width(cell_width);
//----------------------END---------------------------------
}
for(var i=0;i<_56e.length;i++){
...
return cc.join("");
}
注意:这样该写了源码之后每布局一行数据就会改变一次宽度,但是不能立刻刷新,所以需要重新布局,对界面上的性能可能会造成一点影响,所以在datagrid onLoadSuccess回掉函数中增加一句代码
var opt = $('#datagridId').datagrid('options');
if((opt.pageNumber-1) * opt.pageSize >9999)//当超过1W条记录时再重新布局
$('#parentDiv').layout();//parentDiv为该datagrid的父DIV(可以用body),如果没有这句,以上设置将会无效,所以需要在改变宽度之后重新布局