如何为 GridView 中的特定行指定 CSS 类?

Posted

技术标签:

【中文标题】如何为 GridView 中的特定行指定 CSS 类?【英文标题】:How do I specify CSS classes for specific rows in a GridView? 【发布时间】:2011-01-24 07:33:48 【问题描述】:

我正在用 C# 创建一个 SharePoint Web 部件,其中一部分将 GridView 控件输出到页面。虽然我可以通过设置 GridView 本身的 CSS 类来对它的显示方式进行相当广泛的控制,但我真正想做的是能够为某些特定的 td 元素指定类。我不确定如何执行此操作,或者是否会在 GridView 填充行时完成,或者在将 GridView 添加到页面时完成。

在伪代码中,我基本上设想的是能够说出类似gridView.Row[4].CssClass = "header" 的内容,这会将 GridView 中第五行的 td 设置为“标题”类。

我已经研究过使用 RowDataBound 事件,所以我只是使用以下方法来测试它:

protected void outputGrid1_RowDataBound(object sender, GridViewRowEventArgs e)

    e.Row.CssClass = "outputHeader";

这可能是我对如何正确使用它的误解,但它似乎没有做任何事情。我认为它会将所有行设置为类“标题”,如果有,我将从那里开始处理我的逻辑,但我什至无法让它工作。感谢任何人都可以提供的任何帮助!

【问题讨论】:

【参考方案1】:

可选!你也可以在后面的代码中添加引导类...

protected void gvEmpContactsHistory_SelectedIndexChanged(object sender, EventArgs e)
    
        string val = Convert.ToDateTime(gvEmpContactsHistory.SelectedDataKey.Value).ToString("dd-MM-yyyy hh:mm:ss", new System.Globalization.CultureInfo("en-US"));
        GetEmployeeDetail(val);

        foreach (GridViewRow row in gvEmpContactsHistory.Rows)
        
            if (row.RowIndex == gvEmpContactsHistory.SelectedIndex)
            
                row.ToolTip = string.Empty;
                row.Attributes.Add("class", "btn-success");
            
            else
            
                row.ToolTip = "Click to select this row.";
                row.Attributes.Add("class", "btn-outline-success");
            
        
    

【讨论】:

【参考方案2】:

我对 RowDataBound 做了类似的事情:

if (e.Row.RowType == DataControlRowType.DataRow)

    // Check the XXXX column - if empty, the YYYY needs highlighting!
    if (e.Row.Cells[6].Text == " ")
    
       e.Row.CssClass = "highlightRow"; // ...so highlight it
    

检查你所做的事情是否正确的一种方法是通过浏览器监控你的 html 输出......像 Firebug 这样的东西真的很有帮助。

这是一些示例 CSS,我们将 CssClass 'dataGrid' 分配给 Grid:

/* Used to highlight rows */
table.dataGrid tr.highlightRow td

    background-color: #FF6666;
    border-bottom: 1px solid #C0C0FF;

更新: 连接所有这些:我在 aspx 页面上使用自动连接。您的页面声明如下所示:

<%@ Page Language="C#" MasterPageFile="~/XXXXXX.master" AutoEventWireup="true" CodeBehind="YYYY.aspx.cs" Inherits="ZZZ.ZZZ.AAAAAA" Title="View Blah" %>

页面上的此设置允许您使用 UI 连接事件。单击网格,选择属性,单击闪电图标,然后在 RowDataBound 事件下选择您的方法。所有这些在幕后所做的就是向 DataGridView 添加一个属性,因此:

        <asp:GridView ID="uiActionGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False"
        OnRowDataBound="uiActionGridView_RowDataBound" OnDataBound="uiActionGridView_DataBound">
这显示了两个事件正在连接,DataBound 和 RowDataBound 事件。

这就是我使用 VS2005 所做的,这一切似乎都“正常工作”。我认为您遇到的唯一情况是您在发生数据绑定之后手动绑定事件。

【讨论】:

我喜欢这种方法。但是,在调试器中单步执行代码时,我发现我的 RowDataBound 没有被调用。我完全按照问题中的内容写了它,我的网格称为 outputGrid1。你知道为什么不调用 RowDataBound 吗? 我需要做的唯一额外的事情是将我的 GridView 的 RowDataBound 属性设置为 RowDataBound 方法,如下所示: outputGrid1.RowDataBound += outputGrid1_RowDataBound;感谢您的帮助! @Geo Eye:请参阅上面的更新。如果您继续遇到问题,请发布您的代码

以上是关于如何为 GridView 中的特定行指定 CSS 类?的主要内容,如果未能解决你的问题,请参考以下文章

在FastReport中如何为特定的数据行设置显示格式?

如何为角度材料中的特定断点编写css

如何为 QML 布局中的项目指定特定间距?

如何为 UITableView 中的每个单元格类别指定特定的部分名称

如何为特定应用添加特定 CSS

Qml:如何为所有 GridView 项目设置属性