نمایش جزئیات سطرهای 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>

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