(原创)DataGrid多层表头设计

最近做的项目用到了DataGrid多层表头,问了很多人,自己感觉回答不是很明确,自己总结了一下,希望能够使以后使用的兄弟们少走弯路。

类似于上面的一个情况,乍一看,还以为要通过Table来实现哪,但是相信强大的DataGrid,于

是开始寻找方法。一些前辈们的讲解就是TableCellCollection 中添加TableHeaderCell(这应该是基础的

内容)。

图中是繁体,我用简体来说。

<asp:datagrid id="UserDg" OnItemCreated="DataGrid1_ItemCreated"

Public Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As

System.Web.UI.WebControls.DataGridItemEventArgs)
If e.Item.ItemType = ListItemType.Header Then
Dim tcl As TableCellCollection = e.Item.Cells
tcl.Clear()
tcl.Add(New TableHeaderCell)
tcl(0).RowSpan = 2
tcl(0).Text = "个人编码"

tcl.Add(New TableHeaderCell)
tcl(1).RowSpan = 2
tcl(1).Text = "性别"

tcl.Add(New TableHeaderCell)
tcl(2).RowSpan = 2
tcl(2).Text = "姓名"

tcl.Add(New TableHeaderCell)
tcl(3).RowSpan = 2
tcl(3).Text = "服务<br>次数"

tcl.Add(New TableHeaderCell)
tcl(4).RowSpan = 2
tcl(4).Text = "用户

1<br/>

修改"

tcl.Add(New TableHeaderCell)
tcl(5).RowSpan = 2
tcl(5).Text = "健康

1<br/>

清单"

tcl.Add(New TableHeaderCell)
tcl(6).ColumnSpan = 4
tcl(6).Text = "个人疾病危险性评价

1<td align="center" bgcolor="#0082C6" colspan="1" rowspan="2" valign="middle"><font color="#ffffff">管理<br/>处方</font></td>
1<td align="center" bgcolor="#0082C6" rowspan="2" valign="middle"><font color="#ffffff">汇总<br/>报告 
2
3</font></td>
1<td align="center" bgcolor="#0082C6" rowspan="2" valign="middle"><font color="#ffffff">重点<br/>提示</font></td>
 1<tr><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">糖尿病</font></td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">中风</font></td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">冠心病</font> </td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">肺癌</font>"   
 2  
 3End If   
 4End Sub 'DataGrid1_ItemCreated   
 5关键的部分是   
 6tcl.Add(New TableHeaderCell)   
 7tcl(6).ColumnSpan = 4   
 8tcl(6).Text = "个人疾病危险性评价</td><td align="center" bgcolor="#0082C6" colspan="1" rowspan="2" valign="middle"><font color="#ffffff">管理<br/>处方</font></td><td align="center" bgcolor="#0082C6" rowspan="2" valign="middle"><font color="#ffffff">汇总<br/>报告 
 9
10</font></td><td align="center" bgcolor="#0082C6" rowspan="2" valign="middle"><font color="#ffffff">重点<br/>提示</font></td></tr>
1<tr><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">糖尿病</font></td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">中风</font></td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">冠心病</font> </td><td align="center" bgcolor="#848284" valign="middle"><font color="#ffffff">肺癌</font>"   
2  
3  
4我自己的步骤是:现在Table中设计出来结构,然后将双引号变成单引号,在添加到TableHeaderCell.text中就可以了。多复杂的都可以实现。   
5希望对还不会使用DataGrid多层表头设计的兄弟们有所帮助!</td></tr>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus