[ASP.net][C#] -DataGrid 巢狀顯示資料

當我們要使用DataGrid要顯示大量資料時，偏偏某幾個欄位字數特別的多，

若沒有做字數處理的話，畫面肯定會跑掉而且醜不拉嘰，

重點來了，我們要如何把資料弄得齊全又讓使用者看得開心呢？

開始介紹之前先秀一下完成圖

一開始做的時候也以為會很難，做完感覺其實就是Table的應用而已！

1.首先我們先做一個DataGrid
(Client畫面設計)

(Behind)

        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("No", typeof(Int32));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Chi", typeof(string));
            dt.Columns.Add("Math", typeof(string));
            dt.Columns.Add("Eng", typeof(string));
            dt.Columns.Add("Bio", typeof(string));
            dt.Columns.Add("DB", typeof(string));
            dt.Columns.Add("OS", typeof(string));
            dt.Columns.Add("Des", typeof(string));
            Random r=new Random();
            for (int i = 1; i < 10; i++)
            {
                dt.Rows.Add(new object[] { i, "學生" + i, r.Next(0, 100), r.Next(0, 100), 
                    r.Next(0, 100), r.Next(0, 100), r.Next(0, 100), r.Next(0, 100)
                    , "當某一欄資料字數很多的時候可以做成兩列的方式來展示，可以讓畫面更加好看" });
            }
            Grid.DataSource = dt;
            Grid.DataBind();
        }

我們先來看一下產生出來的畫面↓那個評語有點長的過分！

接下來開始進行改造！

2.先把評語那一列 Visible改成false，這行是為了稍後抓資料方便！

3.在DataGrid加上onitemdatabound事件，第二列的資料要靠這個事件觸發產生！

onitemdatabound="Grid_ItemDataBound"

4.在Behind的Grid_ItemDataBound加上今天的主角！

　　　　　　　　if (e.Item.ItemType == ListItemType.Item)//單數列
            {
                Label Des = new Label();
                Des.Text = e.Item.Cells[8].Text;//取值
                DataGridItem Item = new DataGridItem(0, -1, ListItemType.Item);//宣告一個資料列物件
                Item.BackColor = Grid.ItemStyle.BackColor;//設定Item的顏色
                TableCell cell = new TableCell();//宣告一個cell放資料
                cell.Controls.Add(Des);
                cell.Attributes.Add("colspan", "7");//設定跨欄的屬性以及要跨幾欄
                Item.Cells.Add(cell);//把cell塞進去資料列裡面
                e.Item.Parent.Controls.Add(Item);//把資料列塞到DataGrid裡面
            }
            if (e.Item.ItemType == ListItemType.AlternatingItem)//偶數列
            {
                //.DataGrid-AlternatingItem
                Label Des = new Label();
                Des.Text = e.Item.Cells[8].Text;
                DataGridItem Item = new DataGridItem(0, -1, ListItemType.Item);
                Item.BackColor = Grid.AlternatingItemStyle.BackColor;
                TableCell cell = new TableCell();
                cell.Controls.Add(Des);
                cell.Attributes.Add("colspan", "7");
                Item.Cells.Add(cell);
                e.Item.Parent.Controls.Add(Item);
            }

快點來看一下畫面吧！！

上述圖片還有一點美中不足的是序號列沒有跨列耶！！

 5.最後一個動作，把序的rowspan改成2

e.Item.Cells[0].RowSpan = 2;//設定序號跨列的設定

搞定！再來看一下完成圖！有沒有變得很賞心悅目呢！？

2011/11/18 By YC 轉載請附上出處！