Mikel
[转载]easyui datagrid标题列宽度自适应 – wuwenhai – 博客园.
最近项目中使用easyui做前端界面，相信大部分使用过easyui datagrid的朋友有这么一个疑问：如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体自适应呢？ 如： columns: [[{ field: ‘testName’, title: ‘测试名’, align: ‘center’ },{ field: ‘testValue’, title: ‘测试值’, align: ‘center’ }]],如果按照上面这样设置列而不做其他处理的话。绑定出来的数据将会变成：
如上图这样列标题和数据主体对不上号。或许有的朋友会想，直接设个固定值不就完了，但是对于一些不能确定长度的数据设固定值显然不能达到我们的要 求。带着这个问题我百度谷歌了一番 发现网络上并没有我太满意的相关资料。毛主席曾经曰过：自己动手丰衣足食。我只好听从毛主席的教导自己解决问题。By 梨洛
要设置列宽度，我们必须知道easyui datagrid在html中是怎么样的。于是乎动用chrome的开发人员工具，查看一番如图：
头部列标题为：
即我们可以用JQuery选择器 $(“.datagrid-header-inner table tr:first-child”)来取到标题列 （数据主体列也差不多我就不贴出来了）。
既然能取得到这些，只要我们判断数据主体列的宽度大还是 标题列的宽度大。相应的设置回去 那标题和数据不就对其了。来上代码：
<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function () {
$("#test").datagrid({
url: "/Test/Test1Data",
type: "post",
datatype: "json",
width: 465,
height: 280,
loadMsg: "数据加载中，请稍后...",
fitCloumns: true,
nowrap: true,
rownumbers: false,
pagination: true,
singleSelect: true,
showFooter: true,
columns: [[
{ field: 'testName', title: '测试名', align: 'center' },
{ field: 'testValue', title: '测试值', align: 'center' }
]],
//bind数据成功设置列宽度
onLoadSuccess: function (data) {
//datagrid头部 table 的第一个tr 的td们，即columns的集合
var headerTds = $(".datagrid-header-inner table tr:first-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() + 5;
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 headerTable = $(".datagrid-header-inner table:first-child");
var bodyTable = $(".datagrid-body table:first-child");
//循环完毕即能得到总得宽度设置到头部table和数据主体table中
headerTable.width(totalWidth);
bodyTable.width(totalWidth);
bodyTds.each(function (i, obj) {
var headerTd = $(headerTds.get(i));
var bodyTd = $(bodyTds.get(i));
var headerTdWidth = headerTd.width();
bodyTd.width(headerTdWidth);
});
}
});
$("#test").datagrid('getPager').pagination({
showPageList: false,
showRefresh: false,
beforePageText: "第",
afterPageText: "页 <a href='javascript:void(0)' onclick='GoEnterPage()'><img src='http://www.cnblogs.com/Content/themes/icons/Go_.gif'></a>，共{pages}页",
displayMsg: '当前{from}到{to}条，总共{total}条'
});
});
function GoEnterPage() {
var e = jQuery.Event("keydown");
e.keyCode = 13;
$("input.pagination-num").trigger(e);
}
// ]]></script>
设置宽度的相关代码都已经打上注释了。测试了下 可行。无图无真相 附上效果图：
By 梨洛谢谢！
