GridView Webform c#中的行颜色更改

Posted

技术标签:

【中文标题】GridView Webform c#中的行颜色更改【英文标题】:Row Color Change in GridView Webform c# 【发布时间】:2022-01-17 03:53:50 【问题描述】:

我正在使用这种仪表板,我需要在 30 分钟后将行变为红色,在此之前它们需要变为绿色,但我找不到如何操作,在顶部我有一个标签现在是时间日期,在 sql 数据库中我有一个名为“createTime”的字段,但这个字段就像 1020 而不是 10:20,gridview 在更新面板内

这是后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;


namespace WebApplication1

    public partial class WebForm1 : System.Web.UI.Page
    
        protected void Page_Load(object sender, EventArgs e)
        

            BindGrid();
            Label1.Text = DateTime.Now.ToString();
        

        public void BindGrid()
        
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["oscConnectionString"].ConnectionString);

            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "SELECT servicio.callID AS ID, servicio.custmrName AS CLIENTE, servicio.customer AS CODIGO,  servicio.subject AS DESCRIPCION, servicio.createTime AS HORA, servicio.createDate AS FECHA, status.Name AS ESTADO FROM status INNER JOIN servicio ON status.statusID = servicio.status WHERE (servicio.status = 1) ";  /*-1 OR servicio.status = 9*/
            cmd.Connection = con;
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            
            GridView1.DataSource = dr;
            GridView1.DataBind();
        

        protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
        
          

        

        protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        
           
        
          
 

这是仪表板外观和前端代码的图片

小时字段是“hora”列

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title> Grupo Master</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        </div>

       
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">

            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>

            </Triggers>
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="1000">
                </asp:Timer>
                <div style="background-color: #000000; width: 100%; height: 110px;">
                    <img  src="https://ii.ct-stc.com/9/logos/empresas/2021/10/22/denali-1E8CA4E62ED5F5AD140737thumbnail.png" style="height: 62px; width: 258px; margin-top: 18px; margin-right: 9px;" />
                    <asp:Label ID="Label1" runat="server" ForeColor="White" style =" margin-right: 9px; margin-top:10px" ></asp:Label>
                </div>
                <%--<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:oscConnectionString %>" SelectCommand="SELECT servicio.callID, servicio.custmrName, servicio.customer, servicio.custmrName AS Expr1, servicio.subject, servicio.createTime, servicio.createDate, status.Name FROM status INNER JOIN servicio ON status.statusID = servicio.status WHERE servicio.status = -1"></asp:SqlDataSource>--%>
                <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Width="100%" CellPadding="4" ForeColor="Black" GridLines="Horizontal">
                    <Columns>
                        <asp:BoundField DataField="HORA" HeaderText="Hora Inicio" SortExpression="createTime" />
                    </Columns>
                    <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                    <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
                    <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#F7F7F7" />
                    <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
                    <SortedDescendingCellStyle BackColor="#E5E5E5" />
                    <SortedDescendingHeaderStyle BackColor="#242121" />
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>

       
    </form>

    </body>
</html>


【问题讨论】:

【参考方案1】:

格式化网格的地方 - 更改整行或单元格/控件的颜色是 Gridview_Row 数据绑定事件。

但是,您在页面加载时将“时间”设置为标签。但该标签不在更新面板内。因此,当您触发网格重新加载我们的事件(网格行数据绑定)时,将无法使用/查看和享受该标签的使用。您可以将标签移动到更新面板的内部,也可以考虑查看视图状态,或者使用 session() 来存储该值(真的是您的选择)。

所以在数据绑定事件中,你可以这样做:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    
        if (e.Row.RowType == DataControlRowType.DataRow)
        
            // get city
            TextBox mycity = e.Row.FindControl("txtCity") as TextBox;

            if (mycity.Text == "Banff")
            
                // color city text box blue
                mycity.BackColor = System.Drawing.Color.FromName("skyblue");

            
        
    

因此,在该数据绑定事件中,您可以根据您想要的任何标准来格式化/更改颜色。

或者,您可以说像这样格式化整行背景颜色:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    
        if (e.Row.RowType == DataControlRowType.DataRow)
        
        CheckBox ckBox= e.Row.FindControl("chkSel") As CheckBox;

        if (ckBox.Checked)
            e.Row.BackColor = System.Drawing.Color.FromName("skyblue");
     

你会得到每个选中行的输出:

所以行数据绑定 - 使用 FindControl 从控件(模板)中获取任何值。

对于数据绑定列 - 您不能使用名称,而必须使用 cell[3].Text(单元格集合)来获取值。

【讨论】:

以上是关于GridView Webform c#中的行颜色更改的主要内容,如果未能解决你的问题,请参考以下文章

在 DevExpress GridView 上更改行颜色

GridView的行颜色高亮显示(包括满足条件的行)

如何让GridView的行颜色交替

JQuery 更改 ASP:GridView 行的背景颜色

关于GridView的横向合并数据信息

如何在asp.net C# Webform中制作像网格一样的Excel