Highlight کردن سطر یا یک Cell در GridView

در این مقاله نحوه highlight کردن GridView هم در سمت کاربر و هم در سمت سرور را شرح می دهیم

هر توسعه دهنده وب تجربه کار با کنترلهای GridView را دارد. در این مقاله تعدادی مثال از Highlight کردن کنترل GridView را به شما آموزش میدهیم .

ممکن است شما بخواهید سطر های GridView را با Hove کردن موس خود Highlight کنید .

یا ممکن است شما بخواهید با Hover کردن موس فقط یک Cell را Highlight بشود.

یا با کلیک کردن روی هر سطر در GridView سطر آن highlight شود

یا با کلیک کردن بر روی یک Cell در GridView یک Cell فقط Highlight شود

این تمرین مستلزم آشنایی با JQuery است .بنابراین شما باید کتابخانه JQuery به Solution خود اضافه کنید .

در قدم اول ما باید یک سری اطلاعات را در جدول تکمیل نمایید . برای این کار یک جدول به نام "tblEmployee" با چند ستون ایجار می کنیم .

CREATE TABLE [dbo].[tblEmployee](  
    [EmpID] [int] NOT NULL,  
    [EmpName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,  
    [EmpAge] [int] NOT NULL,  
 CONSTRAINT [PK_tblEmp] PRIMARY KEY CLUSTERED   
(  
    [EmpID] ASC  
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]  
  
) ON [PRIMARY]

از دستور پایین برای ذخیره مقدار در جدول استفاده کنید :

insert into tblEmployee values (1,'Francis',30);  
insert into tblEmployee values (2,'Ram',25);  
insert into tblEmployee values (3,'Arul',25);  
insert into tblEmployee values (4,'Prabhu',30);

در قدم بعدی یک وب فرم بسازید و در آن یک کنترل GridView قرار دهید .مانند تگ زیر :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridviewDemo.aspx.cs" Inherits="DemoWebApp.GridviewDemo" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <asp:GridView ID="gvEmployee" runat="server" EmptyDataText="No Records Found" AutoGenerateColumns="false" >  
                <Columns>  
                    <asp:BoundField HeaderText="SNo" DataField="EmpID" />  
                    <asp:BoundField HeaderText="Employee Name" DataField="EmpName" />  
                    <asp:BoundField HeaderText="Age" DataField="EmpAge"  />  
                </Columns>  
            </asp:GridView>  
        </div>  
    </form>  
</body>  
</html>

و در کد صفحه مربوطه Postback صفحه را چک می کنیم و متد اتصال به بانک اطلاعاتی را صدا میزنیم .

protected void Page_Load(object sender, EventArgs e)  
{  
    if (!Page.IsPostBack)  
    {  
        // Bind the grid  
        gvEmployee.DataSource = GetDataFromDB();  
        gvEmployee.DataBind();  
    }  
}

در قسمت پایین اطلاعات را از بانک اطلاعاتی فرا خوانی می کنیم .

private DataTable GetDataFromDB()    
{    
    DataTable dt = new DataTable();    
    // Read Connection String from WebConfig    
    string strConString = ConfigurationManager.ConnectionStrings["MyConString"].ToString();    
    // Create connection object    
    using (SqlConnection con = new SqlConnection(strConString))    
    {    
        string strQuery = "Select * from tblEmployee";    
        // open connection    
        con.Open();    
        // create command object    
        SqlCommand cmd = new SqlCommand(strQuery, con);    
        // create adapter     
        SqlDataAdapter da = new SqlDataAdapter(cmd);    
        // execute query and fill the data into datatable    
        da.Fill(dt);    
    }    
    return dt;    
}

یک کلاس به اسم "Style" در خود فایل aspx اضافه می کنیم .این کلاس قرار است با استفاده از JQuery عمل Highlight کردن سطر یا یک خانه از GridView اعمال کند .

<style type="text/css">  
    .selectedCell {  
        background-color: lightblue;  
    }  
        .unselectedCell {  
        background-color: white;  
    }  
</style>

در مرحله بعدی jQuery را به فایل aspx اضافه می کنیم . کد ها باید بین تگ باز <script> و تگ بسته <Script/> قرار بگیرد

// Highlight the row when mouse over on it  
$(document).ready(function () {  
    $('#gvEmployee tr').hover(function () {  
        $(this).addClass('selectedCell');  
    }, function () { $(this).removeClass('selectedCell'); });  
});

کد پایین برای زمانی است که کاربر بر روی سطری Hover می کند :

// Highlight the cell when mouse over on it  
 $(document).ready(function () {  
     $('#gvEmployee td').hover(function () {  
         $(this).addClass('selectedCell');  
     }, function () { $(this).removeClass('selectedCell'); });  
});

کد پایین زمانی اجرا میشود که کاربر روی یکی از سطر ها کلیک کند :

//Highlight the cell when the row clicked  
$(function () {  
    $(document).on('click', '#gvEmployee tr', function () {  
        $("#gvEmployee tr").removeClass('selectCell');  
        $(this).addClass('selectCell');  
    });  
});

کد پایین زمانی اجرا میشود که کاربر روی Cell خاصی کلیک کند :

//Highlight the cell when the row clicked  
 $(function () {  
     $(document).on('click', '#gvEmployee tr', function () {  
         $("#gvEmployee tr").removeClass('selectCell');  
         $(this).addClass('selectCell');  
     });  
 });

در برخی اوقات شما می خواهید همزمان هم سطر و هم یک خانه از GridView را Highlight کنید .شما میتوانید از رویداد "RowDataBound" مربوط به GridView استفاده کنید.به عنوان مثال ما می خواهیم با کلیک بر روی ستون age تغییر رنگ بدهد .

protected void gvEmployee_RowDataBound(object sender, GridViewRowEventArgs e)  
{  
    if (e.Row.RowType == DataControlRowType.DataRow)  
    {  
        int age = Convert.ToInt32(e.Row.Cells[2].Text.ToString());  
        if (age >= 25 && age < 30)  
        {  
            e.Row.BackColor = Color.GreenYellow;  
        }  
        if (age == 30)  
        {  
            e.Row.BackColor = Color.LightBlue;  
        }  
    }  
}

یا به عنوان مثال شاید شما بخواهید اطلاعات متصل شده از دیتا بیس را Highlight کنید .مانند مثال زیر :

protected void gvEmployee_RowDataBound(object sender, GridViewRowEventArgs e)  
{  
    if (e.Row.RowType == DataControlRowType.DataRow)  
    {  
        int age = Convert.ToInt32(e.Row.Cells[2].Text.ToString());  
        if (age >= 25 && age < 30)  
        {  
            e.Row.Cells[2].BackColor = Color.GreenYellow;  
        }  
        if (age == 30)  
        {  
            e.Row.Cells[2].BackColor = Color.LightBlue;  
        }  
    }  
}

کد بالا به صورت زیر نمایش داده می شود.

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

Highlight کردن سطر یا یک Cell در GridView

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید