نمایش جزئیات سطرهای GridView در ToolTip هنگام رویداد MouseHover با استفاده از jQuery در ASP.Net

در این مقاله با استفاده از یک مثال نحوه نمایش جزئیات سطرهای GridView در ToolTip هنگام رویداد MouseHover  با استفاده از jQuery  در ASP.Net شرح داده می شود. مراحل آموزش GridView و jQuery در ASP.Net  را در پست پایین دنبال کنید .

کد های HTML

کد های HTML  شامل یک GridView  با ۲ ستون BoundField  می شود.

<pre class="lang:default decode:true">&lt;asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"&gt;
    &lt;Columns&gt;
        &lt;asp:BoundField DataField="Id" HeaderText="کد" ItemStyle-Width="30" /&gt;
        &lt;asp:BoundField DataField="Name" HeaderText="نام" ItemStyle-Width="150" /&gt;
    &lt;/Columns&gt;
&lt;/asp:GridView&gt;</pre>

Namespace ها

فضاهای نام زیر را به صفحه اضافه کنید.

#C

using System.Data;

VB.Net

Imports System.Data

بایند کردن محتوای GridView و ToolTip به سطرهای GridView

GrideView را با داده های زیر پر می کنیم ، دقت داشته باشید که DataTable شامل ۳ ستون است در حالیکه  GridView  تنها دو ستون از نوع BoundField دارد.

ستون سوم که در مثال زیرتوضیحات است  به عنوان ToolTip برای GridView  در داخل رویداد OnRowDataBound مقدار دهی می شود.این ToolTip زمانی نمایش داده می شود که mouse  برروی GridView  قرار گیرد.

#C

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Description",typeof(string)) });
            dt.Rows.Add(1, "علی دهقان", "برنامه نویس شرکت مهرایانه.");
            dt.Rows.Add(2, "آرش رضائی", "طراح وب.");
            dt.Rows.Add(3, "مریم محمدی", "نویسنده وبلاگ.");
            dt.Rows.Add(4, "جلال امیری", "عکاس نشریه .");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
        }
    }

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Description", GetType(String))})
            dt.Rows.Add(1, "علی دهقان", "برنامه نویس شرکت مهرایانه.")
            dt.Rows.Add(2, "آرش رضائی", "طراح وب.")
            dt.Rows.Add(3, "مریم محمدی", "نویسنده وبلاگ.")
            dt.Rows.Add(4, "جلال امیری", "عکاس نشریه .")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.ToolTip = TryCast(e.Row.DataItem, DataRowView)("Description").ToString()
        End If
    End Sub

در سمت کاربر یک حلقه jQuery  برروی سطرهای GridView مانند HTML TR  اجرا می شود که هر سطر GridView به وسیله پلاگین SimpleTip در jQuery استفاده میشود. به عنوان مثال وقتی که موس برروی هر سطر GridView  قرار حرکت می کند ToolTip  جزئیات سطرها را نمایش می دهد.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=GridView1] tr').each(function () {
            var toolTip = $(this).attr("title");
            $(this).find("td").each(function () {
                $(this).simpletip({
                    content: toolTip
                });
            });
            $(this).removeAttr("title");
        });
    });
</script>

آموزش GridView و jQuery در ASP.Net

استایل دهی ToolTip

کد های CSS زیر برای استایل دهی SimpleTip استفاده می شوند

<style type="text/css">
    .tooltip
    {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
        background-color: #FB66AA;
        color: White;
        padding: 5px;
        font-size: 10pt;
        font-family: Arial;
    }
    td
    {
        cursor: pointer;
    }
</style>

دانلود فایل های مثال

آموزش GridView و jQuery در ASP.Net

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید

درباره‌ی محمد آذرنیوا

من محمد آذرنیوا، نویسنده و مدرس دوره های برنامه نویسی ، طراحی وب و تحلیل گر پایگاه داده هستم و قصد دارم در این وبسایت مطالب کاربردی در این زمینه را با شما به اشتراک بگذارم. بیشتر از یک برنامه نویس باشید...

همچنین ببینید

۱۵ نکته برای رشد کسب و کار آنلاین بدون نیاز به پول زیاد

اگر بدنبال شروع یا توسعه ی کسب درآمد اینترنتی بدون نیاز به صرف هزینه های …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *