easyui datagrid设置rownumber行号显示NaN怎么回事

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui datagrid设置rownumber行号显示NaN怎么回事相关的知识,希望对你有一定的参考价值。

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");

);

);
参考技术A 我遇到同样的问题,在datagrid里定义pageNumber: 1, pageSize: 10, 就好了 参考技术B var tab = $('#tt').tabs('getTab',0); // 取得第一个tab $('#tt').tabs('update', tab: tab, options: title: 'New Title' ); 参考技术C 同样的问题,当datagrid pageSize大于200时会显示NaN,改小就不会了

datagrid 使用

设置行高:

可以通过设置td高度来设置行高,设置代码如下:

.datagrid-header td,.datagrid-body td
{
  height:40px;
}

 

设置 rownumber 的宽度,防止行数字不能完整显示

修改css代码即可:

.datagrid-header-rownumber,.datagrid-cell-rownumber
{
  width:50px;
}

 

设置列的宽度

这个只需要在进行列设置时指定宽度即可:

columns:[[
  {field:‘id‘,title:‘id‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘protocol‘,title:‘protocol‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘srcIp‘,title:‘srcIp‘,align:‘center‘,halign:‘center‘,width:‘100‘},
  {field:‘dstIp‘,title:‘dstIp‘,align:‘center‘,halign:‘center‘,width:‘100‘},
]],

width:‘100‘  //里面不需要写任何长度单位

 

datagrid 重新加载

$("#dg").datagrid("reload")

 

datagrid 根据参数加载数据

$("#dg").datagrid("load",{id:id,name:name});

 

datagrid 初始化

$("#dg).datagrid({url:‘...‘,queryParams:{name:‘...‘,id:123}})

 

以上是关于easyui datagrid设置rownumber行号显示NaN怎么回事的主要内容,如果未能解决你的问题,请参考以下文章

Easyui Datagrid的Rownumber行号显示问题

Easyui Datagrid的Rownumber行号显示问题

easyui datagrid页面序号框怎么变宽

关于easyui中datagrid分页问题--摘

easyui的datagrid点击页面时怎么触发指定的URL连接

解决easyui datagrid单选时复选框不取消问题