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

تغییر رنگ ردیف CheckBox Checked و MouseOver در ASP.Net GridView
0 0
تغییر رنگ ردیف CheckBox Checked و MouseOver در ASP.Net GridView

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

عملکرد هایی مانند :

1 - برجسته کردن سطر انتخاب شده

2 - همه سوابق را با استفاده از checkbox بررسی کنید.

3 -  برجسته کردن ردیف در رویداد mouseover.

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

مفهوم اساسی

مفهوم behind زمانی است که GridView در client machine به عنوان یک جدول ساده HTML ارائه می شود. از این رو JavaScript یک جدول HTML را مشاهده می کند و نه کنترل  GridView.

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

برای شروع ، یک کنترل GridView با یکheader checkbox و checkbox برای هر رکورد شخصی دارم

<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 را اضافه کنیم

برجسته کردن ردیف زمان بررسی کردن checkbox

<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>

هنگامی که checkbox در سطر GridView بررسی میکند ، از عملکرد بالا فراخوانی می شود

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

قسمت دوم همه checkboxes را حلقه می کند تا دریابیم حداقل یک checkbox بدون علامت است یا خیر.

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

بررسی کردن تمام عملکردهای checkbox

<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> 

 

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

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

توجه :

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

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

<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>

 

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

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

عملکرد فوق روی mouseover و mouseout ردیف GridView فراخوانی می شود. این رویدادها به GridView Row در رویدادهای 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

 


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

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