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

استفاده از جاوا اسکریپت در پیاده سازی قابلیت های چک باکس در کنترل GridView با ASP.Net
0 0
استفاده از جاوا اسکریپت در پیاده سازی قابلیت های چک باکس در کنترل GridView با ASP.Net

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

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

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

2      چک کردن / لغو انتخاب همه رکوردها با استفاده از checkbox.

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

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

مفهوم پایه

مفهوم اساسی این است که GridView در دستگاه client ارائه می شود که به عنوان یک جدول ساده HTML ارائه می شود. از این رو، کد جاوا اسکریپت یک جدول HTML را نمایش می دهد  نه کنترل  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>


تابع فوق وقتی فراخوانی می شود که check / uncheck در ردیف GridView را علامت بزنید

قسمت اول تابع،نشان می دهد اگر علامت جعبه check شده باشد، آنگاه ردیف را به رنگ اصلی تغییر می دهد

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

<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 را در رویداد 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>

عملکرد جاوا اسکریپت فوق مرجع GridView ردیف و رویداد است

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

تابع فوق در رویدادهای mouseover و mouseout در ردیف 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

 


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

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