jquery datagrid行号显示的一个小Bug

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



      


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值