最近項目中使用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")來取到標題列 ?(數據主體列也差不多我就不貼出來了)。

既然能取得到這些，只要我們判斷數據主體列的寬度大還是 標題列的寬度大。相應的設置回去 那標題和數據不就對其了。來上代碼：

$(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: "頁 ，共{pages}頁",

displayMsg: '當前{from}到{to}條，總共{total}條'

});

});

function GoEnterPage() {

var e = jQuery.Event("keydown");

e.keyCode = 13;

$("input.pagination-num").trigger(e);

}

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

總結

以上是生活随笔為你收集整理的datagrid表头与数据列宽度不对齐_easyui datagrid标题列宽度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。