如何在ASP.NET Gridview中创建自定义标头?

时间:2016-04-19 10:45:26

标签: c# asp.net .net gridview

我有一个GridView,我将在其中执行CRUD操作。(因此我使用的是模板字段)。 我试图使我的网格看起来像这样:

enter image description here

每个单元格都包含文本框等。 如果您注意到列,则每列中都有多列。我怎么能这样做?

我遇到http://www.aspsnippets.com/Articles/ASPNet-GridView-Group-Header-Row-Columns-and-display-Multiple-Columns-under-Single-Column.aspx,但这似乎无法满足我的需求。

2 个答案:

答案 0 :(得分:1)

这是我的一个GridView背后的示例代码,用于在GridView的PreRender事件中执行此操作。在这个例子中,我实际上在原始Header之上添加了两行。正如你所看到的,我正在调整新细胞的Colspans。原谅VB:

    Private Sub gvExpertRateHistory_PreRender(sender As Object, e As System.EventArgs) Handles gvExpertRateHistory.PreRender
        Dim this As GridView = sender
        Dim InnerTable As Table = If(this.HasControls(), this.Controls(0), Nothing)

        If this.HeaderRow IsNot Nothing AndAlso InnerTable IsNot Nothing Then
            Dim hr As GridViewRow

            hr = New GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal)

            hr.Cells.Add(NewCell(1, String.Empty, this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Requested On", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(4, "Review Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(6, "Court Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(6, "Deposition Rates", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(4, "IME Rates", this, "WhiteBorderLB"))
            InnerTable.Rows.AddAt(0, hr)

            hr = New GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal)

            hr.Cells.Add(NewCell(1, "Expert", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Requested By", this, , HorizontalAlign.Left))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Flat", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Daily", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Half-Day", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Daily", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Half-Day", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Hourly", this, "WhiteBorderLB"))
            hr.Cells.Add(NewCell(2, "Flat", this, "WhiteBorderLB"))
            InnerTable.Rows.AddAt(1, hr)
        End If
    End Sub

这是一个帮助函数,可以更轻松地添加新单元格。

注意:

  • 如果需要,RowSpan类中还有TableHeaderCell属性
  • 此外,AddCssClass()是我的自定义扩展功能。

    Private Function NewCell(colspan As Int32, 
                             text As String, 
                             gv As GridView, 
                             Optional CssClass As String = "", 
                             Optional Alignment As HorizontalAlign = HorizontalAlign.Center
                           ) As TableHeaderCell
    
        Dim thc As New TableHeaderCell
    
        thc.HorizontalAlign = Alignment
        thc.ColumnSpan = colspan
        thc.Text = text
        thc.BackColor = gv.HeaderRow.BackColor
        thc.ForeColor = gv.HeaderRow.ForeColor
        thc.Font.Bold = True
        thc.AddCssClass(CssClass)
    
        Return thc
    
    End Function
    

答案 1 :(得分:0)

    Design your aspx page like this
    
    Designer source code:
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title>gridview header</title> 
    
        <style type="text/css">
    
        .header
    
        {
    
             background-color:#3E3E3E;        
    
             font-family:Calibri;
    
             color:White;
    
             text-align:center;        
    
        }
    
        </style>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <div>
    
             <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"
    
                           OnRowCreated="gvEmployee_RowCreated" ShowHeader="false">        
    
             <RowStyle Font-Names="Calibri" />
    
             <Columns>
    
             <asp:BoundField DataField="empid" />
    
             <asp:BoundField DataField="name" />        
    
             <asp:BoundField DataField="city" />
    
             <asp:BoundField DataField="country" />    
    
             <asp:BoundField DataField="designation" />    
    
             <asp:BoundField DataField="joiningdate" />
    
             </Columns>
    
            </asp:GridView>
    
        </div>    
    
        </form>
    
    </body>
    
    </html>
    
     
    
    C# code:
    
     
    
    using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Web;
    
    using System.Web.UI;
    
    using System.Web.UI.WebControls;
    
    using System.Data; 
    
    public partial class _Default : System.Web.UI.Page
    
    {
    
        protected void Page_Load(object sender, EventArgs e)
    
        {
    
            if (!IsPostBack)
    
            {
    
                BindData();
    
            }
    
        }
    
        protected void BindData()
    
        {
    
            DataSet ds = new DataSet();
    
            ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
    
            if (ds != null && ds.HasChanges())
    
            {
    
                gvEmployee.DataSource = ds;
    
                gvEmployee.DataBind();
    
            }
    
        }
    
     
    
        protected void gvEmployee_RowCreated(object sender, GridViewRowEventArgs e)
    
        {
    
            if (e.Row.RowType == DataControlRowType.Header)
    
            {
    
                GridViewRow HeaderRow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert); 
    
    
                TableCell HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Personal Details";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
     
    
                HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Location";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
               
    
                HeaderCell2 = new TableCell();
    
                HeaderCell2.Text = "Office details";
    
                HeaderCell2.ColumnSpan = 2;
    
                HeaderRow.Cells.Add(HeaderCell2);
    
     
    
                gvEmployee.Controls[0].Controls.AddAt(0, HeaderRow);
    
     
    
                GridViewRow HeaderRow1 = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
    
     
    
                TableCell HeaderCell = new TableCell();
    
                HeaderCell.Text = "Employee-ID";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Name";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
                            
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "City";         
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Country";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Designation";           
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderCell = new TableCell();
    
                HeaderCell.Text = "Joining date";
    
                HeaderRow1.Cells.Add(HeaderCell);
    
     
    
                HeaderRow.Attributes.Add("class", "header");
    
                HeaderRow1.Attributes.Add("class", "header");
    
                gvEmployee.Controls[0].Controls.AddAt(1, HeaderRow1);
    
            }
    
        }[![enter image description here][1]][1]
    
    }


  

enter image description here