easyuidatagrid表头与数据错位
⽅法⼀：容易，实⽤的⽅法
在jquery.easyui.min.js中查到place(/[\.|\s]/g, "-")在其后添加replace
例⼦：place(/[\.|\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
]
easyuidatagrid/
/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 = $((i));
var bodyTd = $((i));
/
/$("div:first-child", (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;
};
} });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。