Làm cách nào để Gridview hiển thị THEAD?


112

Làm cách nào để tôi có được GridViewquyền kiểm soát để hiển thị các <thead> <tbody>thẻ? Tôi biết .UseAccessibleHeaderslàm cho nó được đặt <th>thay vì <td>, nhưng tôi không thể <thead>xuất hiện.


FYI: UseAccessibleHeader là "true" theo mặc định, vì vậy bạn không cần đặt nó. msdn.microsoft.com/en-us/library/…
MikeTeeVee

Câu trả lời:


187

Điều này nên làm điều đó:

gv.HeaderRow.TableSection = TableRowSection.TableHeader;

69
Các HeaderRowbất động sản sẽ được nullcho đến khi GridViewđã được dữ liệu ràng buộc, vì vậy hãy chắc chắn để chờ cho đến khi databinding đã xảy ra trước khi chạy dòng trên mã.
bdukes

6
Như nhận xét bên dưới, với ASP.NET 4.5 ít nhất sau khi ràng buộc vẫn chưa đủ muộn - tuy nhiên, nó hoạt động trong OnPreRender.
philw

Tôi có một chế độ xem lưới với các tiêu đề phụ tùy chỉnh được thêm vào. Mỗi tiêu đề phụ này hiển thị dữ liệu từ nguồn dữ liệu. Lý do tôi muốn kết xuất theadlà sử dụng nó trong jQuery. Tuy nhiên sau khi hiển thị tiêu đề, tbodydường như không có sẵn. Điều gì có thể bị thiếu trong trường hợp của tôi?
bonCodigo

1
Tôi nhận thấy vẫn còn sự cố trong quá trình đăng lại và đặt mã trong sự kiện liên kết dữ liệu giải quyết tất cả các tình huống.
James Westgate

Tôi đưa dữ liệu của mình từ cơ sở dữ liệu khi người dùng nhấp vào một nút. Trong trường hợp đó, chế độ xem lưới thiếu thẻ thead. Bất kỳ giúp đỡ?
touinta

25

Tôi sử dụng cái này trong OnRowDataBoundtrường hợp:

protected void GridViewResults_OnRowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.Header) {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
}

7
Đây là giải pháp duy nhất làm việc cho tôi. Ai đã thiết kế những điều khiển khủng khiếp này?
EKW

2
Tôi đã chèn mã của bạn vào sự kiện OnRowCreate và nó hoạt động bình thường.
you Đàm phán

Đây là giải pháp tốt nhất vì nó loại bỏ rủi ro (và kiểm tra bắt buộc) của TableSection là rỗng nếu không có hàng nào trong DataSource.
EvilDr

1
FYI, nếu GridViewlà trong vòng một UpdatePanelvà một async-postback được gây ra bởi một số điều khiển khác thì OnRowDataBoundsự kiện sẽ không được nâng lên do đó các mã trong câu trả lời này sẽ không được thực hiện, dẫn đến việc GridViewquay trở lại render mà không cần <thead>thẻ ... tiếng thở dài . Để nhắm mục tiêu trường hợp này, hãy chuyển mã từ câu trả lời được chấp nhận vào PreRendertrình xử lý sự kiện của gridView (giống như câu trả lời của ASalvo gợi ý).
Mr.Z

Đây là câu trả lời chính xác, vì nó sử dụng đúng quy trình làm việc của WebForms.
Marcel

10

Mã trong câu trả lời cần phải tiếp tục Page_Loadhoặc GridView_PreRender. Tôi đặt nó trong một phương thức được gọi sau Page_Loadvà nhận được một NullReferenceException.


4
Bạn cũng có thể đặt trong DataBoundsự kiện. grid.DataBound += (s, e) => { grid.HeaderRow.TableSection = TableRowSection.TableHeader; };
BrunoLM

4
Không biết bây giờ điều này có khác trong .NET 4.5 hay không ... nhưng tôi nhận được HeaderRow là null trong cả hai trình xử lý sự kiện _DataBound và _PreRender. Điều này có thể liên quan đến việc tôi đang sử dụng tính năng mới "Model Binding" của ASP.NET Web Forms trong gridView.
ClearCloud8

7

Tôi sử dụng mã sau để thực hiện việc này:

Những iftuyên bố tôi đã thêm là quan trọng.

Nếu không (tùy thuộc vào cách bạn hiển thị lưới của mình), bạn sẽ đưa ra các ngoại lệ như:

Bảng phải chứa các phần hàng theo thứ tự đầu trang, nội dung và sau đó là chân trang.

protected override void OnPreRender(EventArgs e)
{
    if ( (this.ShowHeader == true && this.Rows.Count > 0)
      || (this.ShowHeaderWhenEmpty == true))
    {
        //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
        this.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    if (this.ShowFooter == true && this.Rows.Count > 0)
    {
        //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
        this.FooterRow.TableSection = TableRowSection.TableFooter;
    }
    base.OnPreRender(e);
}

Đối thistượng là GridView của tôi.

Tôi thực sự ghi đè GridView của Asp.net để tạo điều khiển tùy chỉnh của riêng mình, nhưng bạn có thể dán nó vào trang aspx.cs của mình và tham chiếu GridView theo tên thay vì sử dụng phương pháp tiếp cận lưới tùy chỉnh.

FYI: Tôi chưa kiểm tra logic footer, nhưng tôi biết điều này hoạt động với Headers.


5

Điều này phù hợp với tôi:

protected void GrdPagosRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.TableSection = TableRowSection.TableBody;
    }
    else if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.TableSection = TableRowSection.TableHeader;
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        e.Row.TableSection = TableRowSection.TableFooter;
    }
}

Điều này đã được thử trong VS2010.


2

Tạo một chức năng và sử dụng chức năng đó trong PageLoadsự kiện của bạn như sau:

Chức năng là:

private void MakeGridViewPrinterFriendly(GridView gridView) {  
    if (gridView.Rows.Count > 0) {          
        gridView.UseAccessibleHeader = true;  
        gridView.HeaderRow.TableSection = TableRowSection.TableHeader;  
    }  
} 

Sự PageLoadkiện là:

protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack)
        {
            MakeGridViewPrinterFriendly(grddata);
        }
}

1

Tôi biết câu này đã cũ, nhưng đây là cách giải thích câu trả lời của MikeTeeVee, cho một cái nhìn tiêu chuẩn:

trang aspx:

<asp:GridView ID="GridView1" runat="server" 
    OnPreRender="GridView_PreRender">

aspx.cs:

    protected void GridView_PreRender(object sender, EventArgs e)
    {
        GridView gv = (GridView)sender;

        if ((gv.ShowHeader == true && gv.Rows.Count > 0)
            || (gv.ShowHeaderWhenEmpty == true))
        {
            //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
        if (gv.ShowFooter == true && gv.Rows.Count > 0)
        {
            //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.
            gv.FooterRow.TableSection = TableRowSection.TableFooter;
        }

    }

0

Bạn cũng có thể sử dụng jQuery để thêm nó. Điều này tránh sự cố với TableRowSection.TableHeader khi bị rớt trên PostBack.

$('#myTableId').prepend($("<thead></thead>").append($(this).find("#myTableId tr:first")));

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.