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

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

再加个分页函数,完全OK.

DataGrid中创建复杂表头方法<asp:datalist id="MainDataList" runat="server" BorderWidth="0px" CellPadding="0" BorderStyle="None"
DataGrid中创建复杂表头方法                                                GridLines
="Horizontal" RepeatLayout="Flow" RepeatDirection="Horizontal">
DataGrid中创建复杂表头方法                                                
<HeaderTemplate>
DataGrid中创建复杂表头方法                                                    
<TABLE style="BORDER-RIGHT: #cccccc 1px; BORDER-TOP: #cccccc 1px; BORDER-LEFT: #cccccc 1px; BORDER-BOTTOM: #cccccc 1px; BORDER-COLLAPSE: collapse"
DataGrid中创建复杂表头方法                                                        borderColor
="#cccccc" cellSpacing="0" cellPadding="0" rules="all" border="1">
DataGrid中创建复杂表头方法                                                        
<TR class="red_99" style="FONT-WEIGHT: bold; COLOR: white; HEIGHT: 30px; BACKGROUND-COLOR: #3399cc"
DataGrid中创建复杂表头方法                                                            align
="center">
DataGrid中创建复杂表头方法                                                            
<TD width="100" rowSpan="2">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">小区</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="100" rowSpan="2">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">大楼</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="100" rowSpan="2">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">房号</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="70" rowSpan="2">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">底数</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD colSpan="3" height="22">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">本月应收</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD colSpan="2" height="22">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">实收</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD colSpan="2" height="22">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">累欠</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                        
</TR>
DataGrid中创建复杂表头方法                                                        
<TR class="red_99" style="FONT-WEIGHT: bold; COLOR: white; HEIGHT: 30px; BACKGROUND-COLOR: #3399cc"
DataGrid中创建复杂表头方法                                                            vAlign
="bottom" align="center" class="white_99">
DataGrid中创建复杂表头方法                                                            
<TD width="60" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">抄表</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="55" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">用量</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="70" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">金额</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="60" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">数量</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="60" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">金额</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="55" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">数量</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                            
<TD width="70" height="21">
DataGrid中创建复杂表头方法                                                                
<DIV align="center" class="white_99">金额</DIV>
DataGrid中创建复杂表头方法                                                            
</TD>
DataGrid中创建复杂表头方法                                                        
</TR>
DataGrid中创建复杂表头方法                                                
</HeaderTemplate>
DataGrid中创建复杂表头方法                                                
<FooterTemplate>
DataGrid中创建复杂表头方法                        
</table>
DataGrid中创建复杂表头方法                        
</FooterTemplate>
DataGrid中创建复杂表头方法                        
<ItemStyle BorderWidth="0px" BorderStyle="None" BackColor="#FFFFFF"></ItemStyle>
DataGrid中创建复杂表头方法                        
<ItemTemplate>
DataGrid中创建复杂表头方法                            
<tr bgcolor="<%# strBgcolor%>">
>
DataGrid中创建复杂表头方法private void MainDataList_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
        }

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

DataGrid中创建复杂表头方法

评论

# 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 + e.Item.Cells[0].Text;
}
}

相关文章: