Column Width of easyui DataGrid

Last Update: 2012/04/07 18:39+08

Intro

target: jQuery EasyUI DataGrid 的 Column 自適應寬度
如果您沒有指定寬度給 Grid 的 Columns
在載完資料後, 您會發現 Header 和 Body 的欄寬沒有對齊
主要是因為它產生的 Header 和 Body 是在不同的 table

Content

在 DataGrid 的 onLoadSuccess 的事件中加入一些代碼, 如下:

onLoadSuccess: function (data) {
    var panel = $(this).closest(".datagrid");
    var dg = $(this);
    panel.find("div.datagrid-view2 > div.datagrid-body tr:first > td[field]").each(function (k, v) {
        var bodyCol = $(v);
        var field = bodyCol.attr("field");
        var headerCol = panel.find("div.datagrid-view2 > div.datagrid-header tr:first > td[field='" + field + "']");
        var bodyContent = bodyCol.children(":first");
        var headerContent = headerCol.children(":first");
        var content = null;
        if (bodyCol.width() > headerCol.width()) {
            content = bodyCol.children(":first");
        } else {
            content = headerCol.children(":first");
        }

        var col = dg.datagrid("getColumnOption", field);
        col.width = content.outerWidth();
        col.boxWidth = $.boxModel == true ? content.width() : content.outerWidth();

        bodyContent.width(col.boxWidth);
        headerContent.width(col.boxWidth);
    });
    dg.datagrid("fitColumns");
    dg.datagrid("fixColumnSize");
}

B.R. : )