DataGrid中创建复杂表头方法

GOOGLE下发现有许多创建双行跨列的DATAGRID表头的文章．
大部分是利用在Pager创建时将Pager列去掉而和Header一起形成两行表头（注Pager会在Header前先建立)
如［http://dev.csdn.net/develop/article/18/18971.shtm］
自己也认真学习了一天，发现DATAGRID实际上还是table,

所以我就只用DATALIST实现就可以搞贴

再加个分页函数，完全OK．

<asp:datalist id="MainDataList" runat="server" BorderWidth="0px" CellPadding="0" BorderStyle="None"

GridLines="Horizontal" RepeatLayout="Flow" RepeatDirection="Horizontal">

<TABLE style="BORDER-RIGHT: #cccccc 1px; BORDER-TOP: #cccccc 1px; BORDER-LEFT: #cccccc 1px; BORDER-BOTTOM: #cccccc 1px; BORDER-COLLAPSE: collapse"

borderColor="#cccccc" cellSpacing="0" cellPadding="0" rules="all" border="1">

<TR class="red_99" style="FONT-WEIGHT: bold; COLOR: white; HEIGHT: 30px; BACKGROUND-COLOR: #3399cc"

align="center">

</TD>

</TD>

</TD>

</TD>

</TD>

</TD>

</TD>

</TR>

<TR class="red_99" style="FONT-WEIGHT: bold; COLOR: white; HEIGHT: 30px; BACKGROUND-COLOR: #3399cc"

vAlign="bottom" align="center" class="white_99">

</TD>

</TD>

</TD>

</TD>

</TD>

</TD>

</TD>

</TR>

</HeaderTemplate>

</table>

</FooterTemplate>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

</ItemTemplate>

</asp:datalist>

private void MainDataList_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)

{

if(strBgcolor=="#ffffff")

{

strBgcolor="#f0f8f3";

}

else

{

strBgcolor="#ffffff";

}

posted on 2005-10-14 14:11 Blackie 阅读(544) 评论(6) 编辑收藏引用网摘

# re: DataGrid中创建复杂表头方法，欢迎多交流点方法 2005-10-17 11:29 谢纬强

1、DataGrid显示双层表头

假设你的DataGrid有三列，现在想将前两列作为"大类1"，第三列作为"大类2"，现在，你可以在ItemDataBound事件中加入下面的代码：

if (e.Item.ItemType == ListItemType.Header)
{
e.Item.Cells[0].ColumnSpan = 2;
e.Item.Cells[0].Text = "大类1＜/td＞＜td＞大类2＜/td＞＜/tr＞＜tr＞＜td＞" + e.Item.Cells[0].Text;
}
用这个方法可以为任意添加新行。
2、设置绑定列或者自动生成列的编辑框宽度

请在你的ItemDataBound事件中加入一下代码：

if (e.Item.ItemType == ListItemType.EditItem)
{
for (int i = 0; i < e.Item.Cells.Count; i++)
{
TextBox txt = (TextBox)e.Item.Cells.Controls[0];
txt.Width = Unit.Pixel(50);
}
}
回复更多评论

# re: DataGrid中创建复杂表头方法，欢迎多交流点方法 2005-11-06 11:49 我是菜鸟想学学

我想问问这么添加了以后，你的HeaderTemplate表头每列宽度和ItemTemplate的内容的每列宽度可以相应地对齐么？因为内容部分的信息长度各有各的长度。回复更多评论

# re: DataGrid中创建复杂表头方法，欢迎多交流点方法 2005-11-07 08:50 谢

我做的实际上整个就只是一个Table，所以是会对齐的。回复更多评论

# re: DataGrid中创建复杂表头方法，欢迎多交流点方法 2005-11-29 16:03 Freemhy

____________________________________
| Title1 | | |
|------------------| Title2 | Title3 |
| Sub1 | Sub2 | | |
---------------------------------------------------------
| 1A | 1B | 1C | 1D |
---------------------------------------------------------
| 2A | 2B | 2C | 2D |
---------------------------------------------------------
若实现此样式,可参见如下：

<asp:datagrid id="dgMessage" runat="server" CssClass="datalist_table"
Width="280" AllowPaging="True" PageSize=10 AutoGenerateColumns="False"
HorizontalAlign="Center" BorderStyle="Solid" OnItemDataBound="dgMessage_ItemDataBound">
<FooterStyle CssClass="datalist_title"></FooterStyle>
<SelectedItemStyle CssClass="datalist_data"></SelectedItemStyle>
<ItemStyle CssClass="datalist_data"></ItemStyle>
<HeaderStyle HorizontalAlign="Center" CssClass="datalist_title" VerticalAlign="Middle"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="Sub1" HeaderText="Sub1">
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Sub2" HeaderText="Sub2">
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Title1" HeaderText="">
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundColumn>
asp:BoundColumn DataField="Title2" HeaderText="">
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundColumn>

</Columns>
<PagerStyle NextPageText="Next" PrevPageText="Previous" HorizontalAlign="Left" Mode="NumericPages"></PagerStyle>
</asp:datagrid>

public void dgMessage_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
e.Item.Cells[0].ColumnSpan = 2;
e.Item.Cells[2].Visible=false;
e.Item.Cells[3].Visible=false;
e.Item.Cells[0].Text = "Title1</td><td rowspan=2>Title2</td><td rowspan=2>Title2</td></tr><tr class='datalist_title'><td>" + e.Item.Cells[0].Text;
}
}