easyui datagrid標題列寬度自適應

最近項目中使用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>

設置寬度的相關代碼都已經打上註釋了。測試了下 可行。無圖無真相 附上效果圖：