easyui 表格序号的宽度（DataGrid数据表格序号列自定义扩展）
easyui 表格序号的宽度（DataGrid数据表格序号列自定义扩展）var viewWidth = $('.datagrid-view').width();fixRownumber : function (jq) {这个问题找了好久也没找到是什么原因，就索性自己写个扩展方法思路大概就是当列表加载完毕后，再重新设置一下序号列的宽度$.extend($.fn.datagrid.methods {
在使用EasyUI DataGrid数据表格的时候，一个页面有多个DataGrid数据表格，每个表格对应一个标签页的时候，除了第一个数据表格序号列的宽度可以正常展示外，其他的表格序号列的宽度都比较大，找了一下原因也没有找到，自己写了一个自定义扩展的方法，和大家一块分享一下；
先看一下效果：
这个是正常的数据表格序号展示
这个是不正常的，序号列特别宽
这个问题找了好久也没找到是什么原因，就索性自己写个扩展方法
思路大概就是当列表加载完毕后，再重新设置一下序号列的宽度
$.extend($.fn.datagrid.methods {
fixRownumber : function (jq) {
var viewWidth = $('.datagrid-view').width();
$('.datagrid-view1').css('width' '30px');
$('.datagrid-view1').find('.datagrid-header').css('width' '30px');
$('.datagrid-view1').find('.datagrid-body').css('width' '30px');
$('.datagrid-view1').find('.datagrid-footer').css('width' '30px');
$('.datagrid-view2').css('width' viewWidth-30 'px');
$('.datagrid-view2').find('.datagrid-header').css('width' viewWidth-30 'px');
$('.datagrid-view2').find('.datagrid-body').css('width' viewWidth-30 'px');
$('.datagrid-view2').find('.datagrid-footer').css('width' viewWidth-30 'px');
return jq.each(function () {
var panel = $(this).datagrid("getPanel");
var clone = $(".datagrid-cell-rownumber" panel).last().clone();
clone.css({
"position" : "absolute"
left : -1000
}).appendTo("body");
var width = clone.width("auto").width();
if (width > 25) {
//多加5个像素 保持一点边距
$(".datagrid-header-rownumber .datagrid-cell-rownumber" panel).width(width 5);
$(this).datagrid("resize");
//一些清理工作
clone.remove();
clone = null;
} else {
//还原成默认状态
$(".datagrid-header-rownumber .datagrid-cell-rownumber" panel).removeAttr("style");
}
});
}
});
return里面的代码是当序号大的时候，展示不开的情况，自定义的宽度
调用方式
在成功加载数据表格之后，直接调用fixRownumber即可
});
var defaultoption={
rownumbers : true
pagination : page
striped : true
fit : true
fitColumns:true
method:'post'
toolbar:toolbar
collapsible:true
onLoadSuccess:function(){
$(gridId).datagrid('fixRownumber');
}
};
var datagrid = $(gridId).datagrid(defaultoption);
咱们来看一下最后的效果
