
如何做GridView合并表头,有图。
如图所示,我想要GridView这种合并的效果,我绑定GridView,然后根据信息有层次的显示,我只写了一层,下面需要还能继续分层的,我想逻辑应该一样的,请达人不吝赐教...
如图所示,我想要GridView这种合并的效果,我绑定GridView,然后根据信息有层次的显示,我只写了一层,下面需要还能继续分层的,我想逻辑应该一样的,请达人不吝赐教!
展开
3个回答
2015-08-05
展开全部
如果想实现多表头,得自己绘制tablecell,具体的方式就是先添加一个新的TableHeaderCell,然后就是设定其Attributes属性,再者如果要进行单元格合并,那么需要指定其colspan或者是rowspan,以便确定是横向合并还是竖向合并。
前台代码如下:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1"
GridLines="Vertical" Width="927px" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
onrowcreated="GridView1_RowCreated" ForeColor="Black">
<RowStyle BackColor="#F7F7DE" />
<Columns>
<asp:BoundField DataField="CompanyName" HeaderText="公司" />
<asp:BoundField DataField="ContactName" HeaderText="姓名" />
<asp:BoundField DataField="ContactTitle" HeaderText="职衔" />
<asp:BoundField DataField="Address" HeaderText="住址" />
<asp:BoundField DataField="City" HeaderText="居住地" />
<asp:BoundField DataField="Country" HeaderText="国籍"
SortExpression="Country" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Country] FROM [Customers]">
</asp:SqlDataSource>
前台代码如下:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1"
GridLines="Vertical" Width="927px" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
onrowcreated="GridView1_RowCreated" ForeColor="Black">
<RowStyle BackColor="#F7F7DE" />
<Columns>
<asp:BoundField DataField="CompanyName" HeaderText="公司" />
<asp:BoundField DataField="ContactName" HeaderText="姓名" />
<asp:BoundField DataField="ContactTitle" HeaderText="职衔" />
<asp:BoundField DataField="Address" HeaderText="住址" />
<asp:BoundField DataField="City" HeaderText="居住地" />
<asp:BoundField DataField="Country" HeaderText="国籍"
SortExpression="Country" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Country] FROM [Customers]">
</asp:SqlDataSource>
展开全部
这个就是一个多重表头的例子,实现过程主要是第一行的表头,设置好第一行需要合并几列,也就是rowspan这个属性,然后在GridView初始化的时候先绑定设定好的表头,其他数据按照正常格式排列下来。具体的你可以看下代码,我用过的,运行没问题。
参考资料: http://www.jishublog.com/aspnet/20100612/4.html
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
/// <summary>
/// 在 GridView 控件中创建新行时发生,此事件通常用于在创建某个行时修改该行的布局或外观
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
//判断是否表头
case DataControlRowType.Header:
//第一行表头
TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("rowspan", "2");
tcHeader[0].Attributes.Add("bgcolor", "Azure");
tcHeader[0].Text = "编号";
tcHeader.Add(new TableHeaderCell());
tcHeader[1].Attributes.Add("colspan", "6");
tcHeader[1].Attributes.Add("bgcolor", "Azure");
tcHeader[1].Text = "基 本 信 息";
tcHeader.Add(new TableHeaderCell());
tcHeader[2].Attributes.Add("bgcolor", "Azure");
tcHeader[2].Text = "福利</th></tr><tr>";
//第二行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[3].Attributes.Add("bgcolor", "Azure");
tcHeader[3].Text = "账号";
tcHeader.Add(new TableHeaderCell());
tcHeader[4].Attributes.Add("bgcolor", "Azure");
tcHeader[4].Text = "姓名";
tcHeader.Add(new TableHeaderCell());
tcHeader[5].Attributes.Add("bgcolor", "Azure");
tcHeader[5].Text = "性别";
tcHeader.Add(new TableHeaderCell());
tcHeader[6].Attributes.Add("bgcolor", "Azure");
tcHeader[6].Text = "住址";
tcHeader.Add(new TableHeaderCell());
tcHeader[7].Attributes.Add("bgcolor", "Azure");
tcHeader[7].Text = "邮编";
tcHeader.Add(new TableHeaderCell());
tcHeader[8].Attributes.Add("bgcolor", "Azure");
tcHeader[8].Text = "生日";
tcHeader.Add(new TableHeaderCell());
tcHeader[9].Attributes.Add("bgcolor", "Azure");
tcHeader[9].Text = "月薪";
break;
}
}
/// 在 GridView 控件中创建新行时发生,此事件通常用于在创建某个行时修改该行的布局或外观
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
//判断是否表头
case DataControlRowType.Header:
//第一行表头
TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("rowspan", "2");
tcHeader[0].Attributes.Add("bgcolor", "Azure");
tcHeader[0].Text = "编号";
tcHeader.Add(new TableHeaderCell());
tcHeader[1].Attributes.Add("colspan", "6");
tcHeader[1].Attributes.Add("bgcolor", "Azure");
tcHeader[1].Text = "基 本 信 息";
tcHeader.Add(new TableHeaderCell());
tcHeader[2].Attributes.Add("bgcolor", "Azure");
tcHeader[2].Text = "福利</th></tr><tr>";
//第二行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[3].Attributes.Add("bgcolor", "Azure");
tcHeader[3].Text = "账号";
tcHeader.Add(new TableHeaderCell());
tcHeader[4].Attributes.Add("bgcolor", "Azure");
tcHeader[4].Text = "姓名";
tcHeader.Add(new TableHeaderCell());
tcHeader[5].Attributes.Add("bgcolor", "Azure");
tcHeader[5].Text = "性别";
tcHeader.Add(new TableHeaderCell());
tcHeader[6].Attributes.Add("bgcolor", "Azure");
tcHeader[6].Text = "住址";
tcHeader.Add(new TableHeaderCell());
tcHeader[7].Attributes.Add("bgcolor", "Azure");
tcHeader[7].Text = "邮编";
tcHeader.Add(new TableHeaderCell());
tcHeader[8].Attributes.Add("bgcolor", "Azure");
tcHeader[8].Text = "生日";
tcHeader.Add(new TableHeaderCell());
tcHeader[9].Attributes.Add("bgcolor", "Azure");
tcHeader[9].Text = "月薪";
break;
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询