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

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

例子：field.replace(/[\.|\s]/g, "-").replace(/./g, function ($1) { return $1.charCodeAt(0).toString(16); });//有改動，目的是將其轉(zhuǎn)為十六進制

?

方法二：用過，借鑒的方法：onLoadSuccess：直接設(shè)置列寬

$('#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,//本地數(shù)據(jù)排序
//frozenColumns//不會滾動
columns: [
columns
]
//bind數(shù)據(jù)成功設(shè)置列寬度
, onLoadSuccess: function (data) {
//datagrid頭部 table 的最后一個tr 的td們，即columns的集合
var headerTds = $(".datagrid-header-inner table tr:last-child").children();
//datagrid主體 table 的首個tr 的td們，即第一個數(shù)據(jù)行
var bodyTds = $(".datagrid-body table tr:first-child").children();
var totalWidth = 0; //合計寬度，用來為datagrid頭部和主體設(shè)置寬度
//循環(huán)設(shè)置寬度
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個像素 是因為數(shù)據(jù)主體我們?nèi)〉氖堑谝恍袛?shù)據(jù)，不能確保第一行數(shù)據(jù)寬度最寬，預(yù)留5個像素。有興趣的朋友可以先判斷最大的td寬度都在進行設(shè)置
var bodyTdWidth = bodyTd.width();
var width = 0;
//如果頭部列名寬度比主體數(shù)據(jù)寬度寬，則它們的寬度都設(shè)為頭部的寬度。反之亦然
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");
//循環(huán)完畢即能得到總得寬度設(shè)置到頭部table和數(shù)據(jù)主體table中
//bodyTable.width(totalWidth + 55);
bodyTable.width($(".datagrid-header-inner table tr:last-child").width());
///將所有的列都設(shè)置為可以排序
var columns = $("#stthb_div").datagrid("options").columns[0];
for (i = 0; i < columns.length; i++) {
columns[i].sortable = true;
};
}
});

?

轉(zhuǎn)載于:https://www.cnblogs.com/wusm/p/5643906.html

總結(jié)

以上是生活随笔為你收集整理的easyui datagrid 表头与数据错位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。