Easyui Datagrid的Rownumber行号显示问题
Posted skiwnchqhh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Easyui Datagrid的Rownumber行号显示问题相关的知识,希望对你有一定的参考价值。
Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字,
这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了。
$.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");
}
});
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
将上述代码添加到easyui源码当中即可
然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件
$("#dg").datagrid({
onLoadSuccess : function () {
$(this).datagrid("fixRownumber");
}
});
- 1
- 2
- 3
- 4
- 5
作者:itmyhome
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
以上是关于Easyui Datagrid的Rownumber行号显示问题的主要内容,如果未能解决你的问题,请参考以下文章
easyui datagrid设置rownumber行号显示NaN怎么回事