如何让 Gridview 呈现 THEAD？

Posted 2023-02-23

【中文标题】如何让 Gridview 呈现 THEAD？

【英文标题】：How do I get Gridview to render THEAD?

【发布时间】：2010-09-23 11:20:23

【问题描述】：

如何让GridView 控件呈现<thead> <tbody> 标签？我知道.UseAccessibleHeaders 将其放入<th> 而不是<td>，但我无法让<thead> 出现。

【问题讨论】：

仅供参考：UseAccessibleHeader 默认为“true”，因此您无需设置它。 msdn.microsoft.com/en-us/library/…

【参考方案1】：

应该这样做：

gv.HeaderRow.TableSection = TableRowSection.TableHeader;

【讨论】：

HeaderRow 属性在GridView 被数据绑定之前将是null，因此请确保等到数据绑定发生后再运行上述代码行。

正如下面的评论，至少在绑定之后使用 ASP.NET 4.5 还不够晚 - 但是它可以在 OnPreRender 中使用。

我有一个添加了自定义子标题的网格视图。这些子标题中的每一个都显示来自数据源的数据。我想渲染thead 的原因是在jQuery 中使用它。然而，在渲染标题之后，tbody 似乎不可用。我的情况可能缺少什么？

我发现在回发过程中仍然存在问题，并将代码放在解决所有场景的数据绑定事件中。

当用户单击按钮时，我从数据库中获取数据。在这种情况下，gridview 缺少 thead 标签。有什么帮助吗？

【参考方案2】：

答案中的代码需要继续Page_Load 或GridView_PreRender。我把它放在一个在Page_Load 之后调用的方法中，得到了一个NullReferenceException。

【讨论】：

你也可以加入DataBound事件。 grid.DataBound += (s, e) => grid.HeaderRow.TableSection = TableRowSection.TableHeader; ;

现在不知道这在 .NET 4.5 中是否有所不同......但我在 _DataBound 和 _PreRender 事件处理程序中都得到了 HeaderRow 为空。这可能与我在 gridView 中使用 ASP.NET Web Forms 新的“模型绑定”功能有关。

【参考方案3】：

创建一个函数并在您的 PageLoad 事件中使用该函数，如下所示：

函数是：

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

PageLoad 事件是：

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

【参考方案4】：

我使用以下代码来做到这一点：

我添加的if 语句很重要。

否则（取决于你如何渲染你的网格）你会抛出如下异常：

表格必须包含按页眉、正文和页脚顺序排列的行部分。

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);

this 对象是我的 GridView。

我实际上覆盖了 Asp.net GridView 来制作我自己的自定义控件，但您可以将其粘贴到您的 aspx.cs 页面中并按名称引用 GridView 而不是使用自定义网格视图方法.

仅供参考：我尚未测试页脚逻辑，但我知道这适用于页眉。

【参考方案5】：

这对我有用：

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;
    

这是在 VS2010 中尝试过的。

【参考方案6】：

我在OnRowDataBound 事件中使用它：

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

【讨论】：

这是唯一对我有用的解决方案。谁设计了这些可怕的控件？

我将您的代码插入到 OnRowCreated 事件中并让它正常工作。

这是最好的解决方案，因为如果 DataSource 中没有行，它消除了 TableSection 为空的风险（和必需的检查）。

仅供参考，如果 GridView 在 UpdatePanel 内，并且异步回发是由其他一些控件引起的，则不会引发 OnRowDataBound 事件，因此此答案中的代码获胜'不被执行，导致GridView 恢复为没有<thead> 标签的渲染... sigh。要针对这种情况，请将the accepted answer 中的代码推入gridView 的PreRender 事件处理程序（很像ASalvo's answer 建议的）。

这是正确答案，因为它正确使用了 WebForms 工作流程。

【参考方案7】：

我知道这是旧的，但是，这是对 MikeTeeVee 答案的解释，用于标准网格视图：

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;
        

    

【参考方案8】：

您也可以使用 jQuery 来添加它。这避免了 TableRowSection.TableHeader 在 PostBack 上被丢弃的问题。

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