根据行值更改整行的颜色

Posted 2023-02-15

技术标签:

【中文标题】根据行值更改整行的颜色【英文标题】：Change color of entire row based on row value 【发布时间】：2022-01-12 20:12:10 【问题描述】：

如果对象已签出/签入，则尝试使整个 Row 变为红色。这是我当前的代码，我知道这可能很简单，但我是菜鸟。

<ItemTemplate>
    <tr id="trId" runat="server">
        <td style="text-align: left;">
            <%#Eval("Name")%>
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("Description")%>'></asp:Label>
        </td>
        <td style="text-align: left; display: none;">
            <asp:CheckBox ID="chkStatus" runat="server" Checked='<%#Eval("CheckedOut")%>' />
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblStatus" runat="server" Text='<%#Eval("Status")%>'></asp:Label>
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblLocation" runat="server" Text='<%#Eval("Location")%>'></asp:Label>
        </td>
        <td style="text-align: left;">
            <asp:Button ID="btnChangeStatus" Postback="false" runat="server" Width="150"
                        CommandArgument='<%#Eval("CatId") & "^" & Eval("CheckedOut")%>' OnClick="ChangeStatus" CssClass="btn btn-default" Font-Bold="True" />
        </td>
        <td style="text-align: left;">
            <asp:Button ID="btnEdit" PostBack="false" runat="server" Text="Edit" CssClass="btn btn-default" Width="150"
                        CommandArgument='<%#Eval("CatId")%>' OnClick="Edit" />
        </td>
    </tr>
</ItemTemplate>

Protected Sub CheckPermissions(sender As Object, e As RepeaterItemEventArgs) Handles rep_Data.ItemDataBound

    If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
        Dim chkStatus As CheckBox = CType(e.Item.FindControl("chkStatus"), CheckBox)
        Dim btnChangeStatus As Button = CType(e.Item.FindControl("btnChangeStatus"), Button)
        Dim lblStatus As Label = CType(e.Item.FindControl("lblStatus"), Label)
        If chkStatus.Checked = False Then
            btnChangeStatus.Text = "Check Out"
        Else
            btnChangeStatus.Text = "Check In"
            lblStatus.ForeColor = Drawing.Color.Red

        End If

【问题讨论】：

目前只是将 lblStatus 字段中的文本变为红色。不太懂asp，但是这个有用吗？ Dim row = DirectCast(e.Item.FindControl("trId"), TableRow)row.BackColor = Drawing.Color.Red 【参考方案1】：

好的，如果您注意到这是 GridView 还是 ListView，那就太好了。

但是，查看标记 - 看起来像 ListView - 而且它们是一个很好的控件 - 我最喜欢。虽然 GridView 通常标记较少，但当您真的想要布局更复杂的网格时，ListView 开始胜出（总的来说，整体标记通常更少 - 并且存在更多格式/样式选项。

作为一般规则，给定列的行格式（甚至单个控件）最合适的选择是什么？使用行数据绑定事件。

您也没有分享您拥有的示例代码在何处/何时/如何运行？

但是，我们暂时假设您要为该列表视图提供一些数据。

您也确实有两个按钮 - 但您为按钮设置了 postback = false ？（为什么？？）。事实上，无论如何按钮都没有 PostBack="False" 。所以，删除它。

我们可以稍微连接按钮 - 但第一步是获取我们的条件格式，并且“签入”和“签出”的“文本”首先适用于现有数据。然后，我们就可以处理两次按钮点击了。

所以，我们使用行数据绑定事件。这有几个原因，但是在那个“事件”期间，您不仅可以获得整个列表视图行，而且还可以在行绑定事件期间获得不在列表视图中的列！！！。所以我可能想强调一些值，或者甚至不在 ListView 显示中的标志 - 但它是数据源的一部分。这意味着您通常不必包含一些隐藏的列值 - 因此请牢记这些重要提示。

所以，假设我们有这个列表视图：

    <div style="width:50%">
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID">
            <ItemTemplate>
                <tr style="">
                    <td>
                        <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Desciption" runat="server" Text='<%# Eval("Description") %>' />
                    </td>
                    <td>
                        <asp:CheckBox ID="ActiveCheckBox" runat="server" Checked='<%# Eval("Active") %>' />
                    </td>
                    <td>
                        <asp:label ID="ActiveText" runat="server"  />
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table">
                    <tr runat="server" style="">
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">City</th>
                        <th runat="server">Descripiton</th>
                        <th runat="server">Active</th>
                        <th runat="server">Active Text</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>
    </div>

没有太多的标记。然后我们可以用以下代码填充 LV：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    Using conn As New SqlConnection(My.Settings.TEST4)

        Dim strSQL As String = "SELECT TOP 10 * from tblHotels WHERE Description is not null ORDER BY HotelName"

        Using cmdSQL = New SqlCommand(strSQL, conn)

            conn.Open()
            Dim rstData = New DataTable()
            rstData.Load(cmdSQL.ExecuteReader)
            ListView1.DataSource = rstData
            ListView1.DataBind()

        End Using

    End Using

End Sub

我们的输出现在是这样的：

现在，让我们格式化上面所说的非活动行是红色背景。

我们还将设置活动文本

(if active = true), then You can book!
(if active = false), the text = "don't use"

因此，如前所述，我们使用行数据绑定事件。

但是我们需要像这样在行标记中添加一个“id”：

           <ItemTemplate>
                <tr id="onerow" runat="server">
                    <td>
                        <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                    </td>

所以，我们称它为一行。

现在，在我们的数据项绑定事件中，我们有以下代码：

Protected Sub ListView1_ItemDataBound(sender As Object, e As ListViewItemEventArgs) Handles ListView1.ItemDataBound

    If e.Item.ItemType = ListViewItemType.DataItem Then

        Dim ckBox As CheckBox = e.Item.FindControl("ActiveCheckBox")
        Dim txtActive As Label = e.Item.FindControl("ActiveText")
        Dim onerow As htmlTableRow = e.Item.FindControl("onerow")

        If ckBox.Checked = False Then
            txtActive.Text = "Dont use"
            ' set whole row to red (light red
            onerow.BgColor = "LightCoral"
        Else
            txtActive.Text = "Use Me"
            ' set whole row to red (light red
            onerow.BgColor = "Lightskyblue"

        End If

    End If


End Sub

现在我们有了这个：

现在下一部分是这两个按钮单击事件。我们可以并且想要为这两个按钮编写一些代码。

所以这是第一个：

   <td style="text-align: left;">
        <asp:Button ID="btnChangeStatus" runat="server" Width="150"
                    CommandArgument='<%#Eval("CatId") & "^" & Eval("CheckedOut")%>' OnClick="ChangeStatus" CssClass="btn btn-default" Font-Bold="True" />

好的，我删除了你的 PostBack=False。

及以上 - 更改状态事件？看起来不对。

我们不能简单地双击列表视图的“内部”按钮来连接点击事件 - 但您可以并且应该从这样的标记中执行此操作：

在标记中键入 OnClick=

当你点击 = 时，你会得到这个：

选择创建新事件。好像什么都没发生。

标记将变为：

  <asp:Button ID="btnChangeStatus" runat="server" Text="Button"
     OnClick="btnChangeStatus_Click"
  />

所以，现在我们可以去后面的代码，我们有我们的点击事件。

您可以点击该行并以任何您想要的方式使用该行：

Protected Sub btnChangeStatus_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender

    Dim lvRow As ListViewItem = btn.NamingContainer

    ' now our code is anything we want, say simular to item data bound event.
    Dim ckBox As CheckBox = lvRow.FindControl("ActiveCheckBox")
    Dim txtActive As Label = lvRow.FindControl("ActiveText")
    Dim onerow As HtmlTableRow = lvRow.FindControl("onerow")

    If ckBox.Checked = False Then
        txtActive.Text = "Dont use"
        ' set whole row to red (light red
        onerow.BgColor = "LightCoral"
    Else
        txtActive.Text = "Use Me"
        ' set whole row to red (light red
        onerow.BgColor = "Lightskyblue"
    End If

    ' -------- or get command arugments????

    Dim str = btn.CommandArgument

End Sub

或者，您的代码在上述事件中会这样说：

    ' -------- or get command arugments????
    Dim btnChangeStatus As Button = sender
    Dim lvRow As ListViewItem = btn.NamingContainer

    Dim chkStatus As CheckBox = lvRow.FindControl("chkStatus")
    Dim lblStatus As Label = lvRow.FindControl("lblStatus")
    If chkStatus.Checked = False Then
        btnChangeStatus.Text = "Check Out"
    Else
        btnChangeStatus.Text = "Check In"
        lblStatus.ForeColor = Drawing.Color.Red
    End If

所以，我们得到按钮，得到容器（列表视图行），然后按照上面的代码进行编码。所以上面是“smaple”，但你可以按照上面的方法为单行按钮点击任何你想要的代码。

【讨论】：

Albert，谢谢...。感谢您为我提供的完整解决方案和解释。它完美地工作！！！！

以上是关于根据行值更改整行的颜色的主要内容，如果未能解决你的问题，请参考以下文章

满足条件时更改表格中整行的颜色？

选项卡时更改整行的背景颜色？

如何更改具有特定列值的 JTable 整行的颜色

Excel中，如何根据某一列的值来修改整行的颜色？

如何使用 rhansontable 和复选框更改某些行的颜色？

Excel中如何根据某一列的值对整行进行颜色填充？