如何将 CSS 类添加到 BoundField，以便使用 jQuery 找到它？

Posted 2023-03-06

【中文标题】如何将 CSS 类添加到 BoundField，以便使用 jQuery 找到它？

【英文标题】：How do I add a CSS class to a BoundField, so I can find it with jQuery?

【发布时间】：2011-03-28 22:03:10

【问题描述】：

我想在 GridView 控件中的一些 BoundFields 中添加一个类名；这样一旦 GridView 被数据绑定和渲染，我就可以获得类似的东西：

<td class="Tag1">Some data came from data source</td>

这样做的目的是为了能够通过这种方式找到所有“Tag1”的元素：

var allTag1td = $('td.Tag1');

那么，如何将此类添加到 BoundField 以便以这种方式呈现？

【参考方案1】：

不能直接在aspx中设置你boundfield的itemstyle属性吗？

（TableItemstyle 有一个 CssClass 属性）

<asp:BoundField ItemStyle-CssClass="Tag1"/>

见：

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datacontrolfield.itemstyle.aspx http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.tableitemstyle_properties.aspx

【参考方案2】：

我在 RowCreated_Event 中做了类似的事情。我必须根据它们的值设置单元格的样式。

http://msdn.microsoft.com/de-de/library/system.web.ui.webcontrols.gridview.rowcreated.aspx

【参考方案3】：

您可以在创建行时将行的单元格CssClass 属性设置为Tag1（RowCreated 事件）。

Page.aspx：

<asp:GridView OnRowCreated="grid_RowCreated" AutoGenerateColumns="true" runat="server" ID="grid"></asp:GridView>

代码隐藏文件，Page.aspx.cs：

protected void grid_RowCreated(object sender, GridViewRowEventArgs e) 
    foreach (TableCell cell in e.Row.Cells)
        cell.CssClass = "Tag1";

代码会将你表中每个td的class属性设置为Tag1；呈现页面的标记将看起来像您要查找的标记：

<td class="Tag1"></td>
<td class="Tag1"></td>
...

【参考方案4】：

将 ItemStyle 属性添加到您的字段：

<asp:BoundField DataField="Count" HeaderText="Count">
    <ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>

【参考方案5】：

确保设置ItemStyle CssClass 属性而不是其他属性之一。我犯了设置ControlStyle CssClass 属性的错误，直到我读了这篇文章才意识到我的错误。

【参考方案6】：

我的回答

<asp:BoundField DataField="id" HeaderText="" SortExpression="id"> <ItemStyle Width="10%" CssClass="hide"/> <headerstyle CssClass="hide"> </headerstyle> </asp:BoundField>

【参考方案7】：

您可以转换为 TemplateField，然后使用标签并添加您想要的任何样式。

<asp:TemplateField HeaderText=""> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Field") %>' CssClass="YourStyle" /> </ItemTemplate> </asp:TemplateField>

或

<asp:TemplateField HeaderText=""> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Field") %>' Style="line-height: 1.4" /> </ItemTemplate> </asp:TemplateField>

它对我有用。

【参考方案8】：

要在后面的代码中添加边界域（这是 VB，但对于 C# 类似），请尝试：

bf = New BoundField()
bf.DataField = "FieldName"
bf.HeaderText = "Header"
bf.SortExpression = "FieldName(could be different)"
bf.ItemStyle.CssClass = "NoWrap"
MyGrid.Columns.Add(bf)

如果你想让 CssClass 数据依赖，你需要一个模板字段，例如：

tf = New WebControls.TemplateField()
tf.HeaderText = "Whatever"
tf.SortExpression = "Whatever"
tf.ItemTemplate = New MyItemTemplate("DataField", "CssDataField")
AssessmentGrid.Columns.Add(tf)

MyItemTemplate 在 App_Code 文件夹中实现 ITemplate 例如：

Imports Microsoft.VisualBasic

Public Class MyItemTemplate
    Implements System.Web.UI.ITemplate
    'Normally Template type would be in here but we are only do Item 
    '(no edit, delete or header etc)
    Dim DataField1 As String 'Displayed data
    Dim DataField2 As String 'CssClass

    Sub New(ByVal Field1 As String, ByVal Field2 As String)
        DataField1 = Field1
        DataField2 = Field2
    End Sub

    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) _
            Implements System.Web.UI.ITemplate.InstantiateIn
        Dim ml As New Label()
        ml.ID = DataField1 
        ml.Text = ""
        ml.CssClass = ""
        AddHandler ml.DataBinding, New EventHandler(AddressOf Item_DataBinding)
        container.Controls.Add(l)
    End Sub

    Protected Sub Item_DataBinding(ByVal sender As Control, ByVal e As System.EventArgs)
        Dim bound_value_object As Object
        Dim data_item_container As IDataItemContainer = sender.NamingContainer
        Dim Parent As TableCell = sender.Parent
        Dim l As Label = sender
        bound_value_object = DataBinder.Eval(data_item_container.DataItem, DataField1)
        l.Text = bound_value_object.ToString
        bound_value_object = DataBinder.Eval(data_item_container.DataItem, DataField2)
        Parent.CssClass = bound_value_object.ToString
    End Sub
End Class

您可以将 CssClass 直接应用于标签，但原始问题在单元格上具有它