توضیحات و دانلود

استفاده از جاوا اسکریپت در کنترل GridView در ASP.NET
0 0
استفاده از جاوا اسکریپت در کنترل GridView در ASP.NET

 باسلام در این مقاله،  توضیح می دهیم چگونه می توان از جاوا اسکریپت در کنترل GridView ASP.Net استفاده کرد و  آن را زیبا تر کرد.

توابعی مانند:

1      برجسته کردن ردیف انتخاب شده

2     انتخاب   / لغو انتخاب همه رکوردها با  استفاده از یک check box.

3      برجسته کردن ردیف با قرار دادن موس روی آن .

به این ترتیب سه توابع فوق را می توان به راحتی با استفاده از جاوا اسکریپت تعریف و اجرا نمود

مفهوم پایه

مفهوم اساسی  این است که GridView در دستگاه کاربر به عنوان یک جدول ساده HTML ارائه می شود. از این رو، کد جاوا اسکریپت یک جدول HTML را نمایش می دهد و نه کنترل ASP.Net GridView.

از اینرو یک بار به راحتی می توانید اسکریپت هایی را برای GridView، DataGrid و دیگر کنترل ها بنویسید تا بدانید که چگونه آنها رندر شده اند.

برای شروع یک کنترل GridView با چک باکس هدر و کادر برای هر رکورد دارید

<asp:GridView ID="GridView1" runat="server"  HeaderStyle-CssClass = "header"

AutoGenerateColumns = "false" Font-Names = "Arial"

OnRowDataBound = "RowDataBound"

Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >

<Columns>

<asp:TemplateField>

    <HeaderTemplate>

      <asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />

    </HeaderTemplate>

   <ItemTemplate>

     <asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />

   </ItemTemplate>

</asp:TemplateField>

<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID"  />

<asp:BoundField ItemStyle-Width="150px" DataField="City"

HeaderText="City" />

<asp:BoundField ItemStyle-Width="150px" DataField="Country"

HeaderText="Country"/>

<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode"  HeaderText= "PostalCode"/>

</Columns>

</asp:GridView>


در بالا متوجه خواهید شد که دو توابع JavaScript را checkAll و Check_Click فراخوانی می کنید . همچنین یک رویداد RowDataBound را به GridView اضافه کردیم تا رویداد mouseover را اضافه کنیم

کادر انتخاب را انتخاب کنید

<script type = "text/javascript">

function Check_Click(objRef)

{

    //Get the Row based on checkbox

    var row = objRef.parentNode.parentNode;

    if(objRef.checked)

    {

        //If checked change color to Aqua

        row.style.backgroundColor = "aqua";

    }

    else

    {   

        //If not checked change back to original color

        if(row.rowIndex % 2 == 0)

        {

           //Alternating Row Color

           row.style.backgroundColor = "#C2D69B";

        }

        else

        {

           row.style.backgroundColor = "white";

        }

    }

   

    //Get the reference of GridView

    var GridView = row.parentNode;

   

    //Get all input elements in Gridview

    var inputList = GridView.getElementsByTagName("input");

   

    for (var i=0;i<inputList.length;i++)

    {

        //The First element is the Header Checkbox

        var headerCheckBox = inputList[0];

       

        //Based on all or none checkboxes

        //are checked check/uncheck Header Checkbox

        var checked = true;

        if(inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)

        {

            if(!inputList[i].checked)

            {

                checked = false;

                break;

            }

        }

    }

    headerCheckBox.checked = checked;

   

}

</script>

تابع فوق وقتی فراخوانی می شود که علامت جعبه در ردیف GridView را علامت بزنید یا علامت آن را علامت بزنید

قسمت اول تابع،  اگر علامت جعبه چک شده باشد ردیف را نشان می دهد، اگر علامت کادر را علامت نزنید , ردیف را به رنگ اصلی تغییر می دهد، .

قسمت دوم، از طریق همه کادرهای جعبه، حل می شود تا مشخص شود آیا حداقل یک علامت چک شده است یا خیر.

اگر حداقل یکی از گزینه های انتخاب شده را علامت نزنید، علامت کادر Check Header را کنار بگذارید و آن را بررسی کنید

همه کارکردهای تأیید را بررسی کنید

<script type = "text/javascript">

function checkAll(objRef)

{

    var GridView = objRef.parentNode.parentNode.parentNode;

    var inputList = GridView.getElementsByTagName("input");

    for (var i=0;i<inputList.length;i++)

    {

        //Get the Cell To find out ColumnIndex

        var row = inputList[i].parentNode.parentNode;

        if(inputList[i].type == "checkbox"  && objRef != inputList[i])

        {

            if (objRef.checked)

            {

                //If the header checkbox is checked

                //check all checkboxes

                //and highlight all rows

                row.style.backgroundColor = "aqua";

                inputList[i].checked=true;

            }

            else

            {

                //If the header checkbox is checked

                //uncheck all checkboxes

                //and change rowcolor back to original

                if(row.rowIndex % 2 == 0)

                {

                   //Alternating Row Color

                   row.style.backgroundColor = "#C2D69B";

                }

                else

                {

                   row.style.backgroundColor = "white";

                }

                inputList[i].checked=false;

            }

        }

    }

}

</script> 

تابع فوق زمانی که  شما با کلیک بر روی Header check all checkbox را اجرا می کنید و کادر انتخاب Header را انتخاب می کنید، تمام سطرها را برجسته می کند و کادرهای انتخاب شده را در تمام ردیف ها بررسی می کند.

و هنگامی که آن را علامت نزنید، رنگ اصلی ردیف را دوباره بازیابی می کند و کادرهای انتخاب را حذف می کند.

توجه داشته باشید:

چک کردن همه چک باکس  فقط  صفحه فعلی GridView را بررسی می کند و نه همه.

ردیف GridView را در رویداد موسover برجسته کنید

<script type = "text/javascript">

function MouseEvents(objRef, evt)

{

    var checkbox = objRef.getElementsByTagName("input")[0];

   if (evt.type == "mouseover")

   {

        objRef.style.backgroundColor = "orange";

   }

   else

   {

        if (checkbox.checked)

        {

            objRef.style.backgroundColor = "aqua";

        }

        else if(evt.type == "mouseout")

        {

            if(objRef.rowIndex % 2 == 0)

            {

               //Alternating Row Color

               objRef.style.backgroundColor = "#C2D69B";

            }

            else

            {

               objRef.style.backgroundColor = "white";

            }

        }

   }

}

</script>

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

سپس بر اساس نوع رویداد اگر رویداد mouseover باشد، با تغییر رنگ آن به رنگ نارنجی و اگر سطر mouseous باشد، رنگ ردیف را قبل از وقوع رویداد تغییر می دهد.

تابع فوق در رویدادهای ماوس و ماوس در ردیف GridView نامیده می شود. این وقایع به GridView ردیف در رویدادهای RowDataBound متصل به کد زیر است

C #

protected void RowDataBound(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow )

    {

        e.Row.Attributes.Add("onmouseover","MouseEvents(this, event)");

        e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)"); 

    }

}

VB.Net

Protected Sub RowDataBound(ByVal sender As Object,

ByVal e As GridViewRowEventArgs)

  If e.Row.RowType = DataControlRowType.DataRow Then

     e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event)")

     e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)")

  End If

End Sub

توابع جاوا اسکریپت فوق در مرورگرهای زیر تست شده اند

1      اینترنت اکسپلورر 7

2      موزیلا فایرفاکس 3

3      گوگل کروم

 

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :