[ASP.NET]動態指定DataGrid欄位，如何固定寬度

2009-08-07

26903
0
ASP.NET

前陣子有人詢問我這樣的問題，他說他透過ADO去讀取資料後，將資料內容餵給DataGrid時，發現DataGrid的欄位寬度怪怪的，怎麼個怪法，我們看一下下面這個畫面，以下以北風資料庫的Employees這個資料庫的資料來做說明：

這個版面的呈現，怎麼樣也稱不上美觀，我們看到欄位的寬度隨著欄位的Header跟內容的寬度做了調整，但偏偏這個調整又非常的醜陋，

他說他在程式中這樣寫：

{
    BindGrid();
}

private void BindGrid()
{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;
        //設定固定寬度為100
        tBC.HeaderStyle.Width = 100;
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

在18行的部分他想把每個欄位的寬度都設定為100，但跑出來的結果卻跟他所想的不一樣，上網找了一下，找到透過table-layout的fixed屬性值可以固定住DataGrid的欄位寬度，所以我們把這一行加進去：

{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;
        //設定固定寬度為100
        tBC.HeaderStyle.Width = 100;
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }
    //固定欄位寬度
    ModuleGrid.Style.Add("table-layout", "fixed");

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

再看看目前畫面的狀況，果然每個欄位的寬度都被固定在100px了，看起來稍微美觀了一些，不過Notes這個欄位還是破壞了整個版面，我們再做一些調整，

{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;

        //如果是Notes這個欄位的話，寬度是300，其它是100
        if (tDataSource.Columns[i].ColumnName == "Notes")
        {
            tBC.HeaderStyle.Width = 300;
        }
        else
        {
            //設定固定寬度為100
            tBC.HeaderStyle.Width = 100;
        }
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }
    //固定欄位寬度
    ModuleGrid.Style.Add("table-layout", "fixed");

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

判斷如果欄位名稱是Notes的話就把寬度放大到300px，其它的欄位則為100px，畫面就會變成這個樣子：

整體來說就變的美觀多了，其實在判斷欄寬的部分可以去抓Table schema來決定要給多少寬度，不過本篇的重點只在固定寬度，讓他不會亂跑就好，參考看看....

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁