easyui datagrid 表头与数据错位

方法一：容易，实用的方法

在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace

例子：field.replace(/[\.|\s]/g, "-").replace(/./g, function ($1) { return $1.charCodeAt(0).toString(16); });//有改动，目的是将其转为十六进制

方法二：用过，借鉴的方法：onLoadSuccess：直接设置列宽

$('#stthb_div').datagrid({
data: [],
//title: "分析",
//iconCls:'icon-save',
padding: "30px",
nowrap: false,
singleSelect: true,
//striped: true,
height: win_h,
collapsible: true,
resizable: false,
//sortable: true,
remoteSort: false,//本地数据排序
//frozenColumns//不会滚动
columns: [
columns
]
//bind数据成功设置列宽度
, onLoadSuccess: function (data) {
//datagrid头部 table 的最后一个tr 的td们，即columns的集合
var headerTds = $(".datagrid-header-inner table tr:last-child").children();
//datagrid主体 table 的首个tr 的td们，即第一个数据行
var bodyTds = $(".datagrid-body table tr:first-child").children();
var totalWidth = 0; //合计宽度，用来为datagrid头部和主体设置宽度
//循环设置宽度
bodyTds.each(function (i, obj) {
var headerTd = $(headerTds.get(i));
var bodyTd = $(bodyTds.get(i));
//$("div:first-child", headerTds.get(i)).css("text-align", "center");
var headerTdWidth = headerTd.width(); //获取第i个头部td的宽度
//这里加5个像素是因为数据主体我们取的是第一行数据，不能确保第一行数据宽度最宽，预留5个像素。有兴趣的朋友可以先判断最大的td宽度都在进行设置
var bodyTdWidth = bodyTd.width();
var width = 0;
//如果头部列名宽度比主体数据宽度宽，则它们的宽度都设为头部的宽度。反之亦然
if (headerTdWidth > bodyTdWidth) {
width = headerTdWidth;
bodyTd.width(width);
headerTd.width(width);
totalWidth += width;
} else {
width = bodyTdWidth;
headerTd.width(width);
bodyTd.width(width);
totalWidth += width;
}
});
var bodyTable = $(".datagrid-body table:first-child");
//循环完毕即能得到总得宽度设置到头部table和数据主体table中
//bodyTable.width(totalWidth + 55);
bodyTable.width($(".datagrid-header-inner table tr:last-child").width());
///将所有的列都设置为可以排序
var columns = $("#stthb_div").datagrid("options").columns[0];
for (i = 0; i < columns.length; i++) {
columns[i].sortable = true;
};
}
});

巴特西

easyui datagrid 表头与数据错位

最新文章

热门文章