最近項目中使用easyui做前端界面，相信大部分使用過easyui datagrid的朋友有這么一個疑問：如果在columns中不設(shè)置width屬性能不能寫個方法讓datagrid的頭部標題和數(shù)據(jù)主體自適應(yīng)呢？如：?columns: [[{ field: 'testName', title: '測試名', align: 'center' },{ field: 'testValue', title: '測試值', align: 'center' }]],如果按照上面這樣設(shè)置列而不做其他處理的話。綁定出來的數(shù)據(jù)將會變成：

? ? ? ? ??

如上圖這樣列標題和數(shù)據(jù)主體對不上號。或許有的朋友會想，直接設(shè)個固定值不就完了，但是對于一些不能確定長度的數(shù)據(jù)設(shè)固定值顯然不能達到我們的要求。帶著這個問題我百度谷歌了一番 發(fā)現(xiàn)網(wǎng)絡(luò)上并沒有我太滿意的相關(guān)資料。毛主席曾經(jīng)曰過：自己動手豐衣足食。我只好聽從毛主席的教導(dǎo)自己解決問題。By 梨洛

要設(shè)置列寬度，我們必須知道easyui datagrid在html中是怎么樣的。于是乎動用chrome的開發(fā)人員工具，查看一番如圖：

頭部列標題為：

即我們可以用Jquery選擇器 $(".datagrid-header-inner table tr:first-child")來取到標題列 ?(數(shù)據(jù)主體列也差不多我就不貼出來了)。

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

$(document).ready(function () {

$("#test").datagrid({

url: "/Test/Test1Data",

type: "post",

datatype: "json",

width: 465,

height: 280,

loadMsg: "數(shù)據(jù)加載中，請稍后...",

fitCloumns: true,

nowrap: true,

rownumbers: false,

pagination: true,

singleSelect: true,

showFooter: true,

columns: [[

{ field: 'testName', title: '測試名', align: 'center' },

{ field: 'testValue', title: '測試值', align: 'center' }

]],

//bind數(shù)據(jù)成功設(shè)置列寬度onLoadSuccess: function (data) {

//datagrid頭部 table 的第一個tr 的td們，即columns的集合var headerTds = $(".datagrid-header-inner table tr:first-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() + 5;

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 headerTable = $(".datagrid-header-inner table:first-child");

var bodyTable = $(".datagrid-body table:first-child");

//循環(huán)完畢即能得到總得寬度設(shè)置到頭部table和數(shù)據(jù)主體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);

}

設(shè)置寬度的相關(guān)代碼都已經(jīng)打上注釋了。測試了下 可行。無圖無真相 附上效果圖：

總結(jié)

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

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