easyui 标题和内容对齐，自适应

原文地址：http://www.cnblogs.com/wujie6166/archive/2011/09/21/2184049.html

最近项目中使用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 language="javascript" type="text/javascript">    $(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>

设置宽度的相关代码都已经打上注释了。测试了下 可行。无图无真相 附上效果图：