您的位置:首页 > 其它

解决 GridView 多行表头显示 的方法

2011-10-10 09:37 507 查看
这只是一个很简单的效果演示,实现 GridView 两行或多行表头的显示

我们先来看一下效果:



再来看看源代码:

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
欢迎使用 ASP.NET!
</h2>
<p>
<asp:GridView ID="GridView1" runat="server" Width="383px" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="序号"></asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="100px">
<HeaderTemplate>
<table align="center">
<tr>
<td>
学员姓名
</td>
</tr>
<tr>
<td>
学员成绩
</td>
</tr>
</table>
</HeaderTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="100px">
<HeaderTemplate>
<table width="100%" align="center">
<tr>
<td colspan="2" width="50%">
张三
</td>
</tr>
<tr>
<td width="25%">
数学
</td>
<td width="25%">
语文
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table width="100%">
<tr>
<td width="25%">
<%# Eval("")%>
</td>
<td width="25%">
<%# Eval("") %>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="100px">
<HeaderTemplate>
<table width="100%">
<tr>
<td colspan="2" width="50%">
李四
</td>
</tr>
<tr>
<td width="25%">
数学
</td>
<td width="25%">
语文
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table width="100%">
<tr>
<td width="25%">
<%# Eval("")%>
</td>
<td width="25%">
<%# Eval("") %>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</asp:Content>

这只是两行两列表头的演示,多行的效果方法是一样的
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: