jquery datagrid行号显示的一个小Bug_jqgrid加上rownumbers:后无法显示-优快云博客

本文链接：https://blog.youkuaiyun.com/kunkkaCoco/article/details/7781892

在jQuery EasyUI的DataGrid中，当数据行超过9999行时，第一列的行号（rownumber）会出现显示不全的Bug。通过分析源码，发现可以通过动态调整第一列单元格的宽度来解决此问题。当行数超过9999时，修改每个数据行的第一个单元格宽度，并在datagrid的onLoadSuccess回调中执行更新布局的代码，以确保显示完整行号。这样做可能会影响界面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)，如果没有这句，以上设置将会无效，所以需要在改变宽度之后重新布局