ورود / ثبت نام
0
0

انتخاب و عدم انتخاب سطرهای GridView با استفاده از Checkbox در Jquery

361 بازدید
Checkbox

Checkbox

وب سایت های بسیاری نیاز دارند که تمام سطرهای گرید ویوی خود را به سادگی با استفاده از تنها یک checkbox که در سطر header وجود دارد، انتخاب کنند. حتما نمونه های مشابه این امکان را در Yahoo Mail یا Hotmail مشاهده کرده اید که می توانید همه ایمیل ها را با کلیک روی checkbox ای که در بالای جدول ایمیل ها وجود دارد، انتخاب نمایید. در این مقاله نشان می دهیم که چگونه به کمک چند خط کد جی کوئری می توانید این امکان را در کنترل ASP.Net GridView  فراهم نمایید.

 

برای شروع، یک ASP.Net website ایجاد کرده و یک GridView به صفحه اضافه می کنیم. برای این مثال ما از فیلدهای ID، Name و Salary استفاده می کنیم، بنابراین سه  فیلد bound و یک Template Field که checkbox ها را در header نگه می دارد، اضافه می کنیم.

سورس کامل HTML مربوط به GridView به شکل زیر می باشد:

<asp:GridView ID="GridView1" runat="server" Font-Size="10pt" 
   Font-Names="Verdana" CellPadding="4" Width="400px" GridLines="None" 
   ForeColor="#333333" AutoGenerateColumns="false">
   <RowStyle BackColor="#EFF3FB" />
   <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
   <AlternatingRowStyle BackColor="White" />
   <Columns>
      <asp:TemplateField>
         <HeaderTemplate>
            <asp:CheckBox ID="chkHeader" runat="server" />
         </HeaderTemplate>
         <ItemTemplate>
            <asp:CheckBox ID="chkRow" runat="server" />
         </ItemTemplate>
      </asp:TemplateField>
      <asp:BoundField DataField="ID" HeaderText="ID" />
      <asp:BoundField DataField="Name" HeaderText="Name" />
      <asp:BoundField DataField="Salary" HeaderText="Salary" />
   </Columns>
</asp:GridView>

 

برای اینکه سادگی آموزش حفظ شود، این گرید ویو را به دیتابیس وصل نکرده و یک سری داده به عنوان نمونه در آن وارد کردیم. برای وارد کردن داده ها به جدول کد زیر را در رویداد Page Load می نویسیم:

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      LoadData();
   }
}

private void LoadData()
{
   DataTable table = new DataTable();
   table.Columns.Add("ID", typeof(int));
   table.Columns.Add("Name", typeof(string));
   table.Columns.Add("Salary", typeof(decimal));

   for (int i = 1; i < 8; i++)
   {
      DataRow row = table.NewRow();
      row["ID"] = i;
      row["Name"] = "Name " + i;
      row["Salary"] = 10000 * i;
      table.Rows.Add(row);
   }

   GridView1.DataSource = table;
   GridView1.DataBind(); 
}

 

حالا تنها چند خط کد جی کوئری نیاز داریم تا امکان انتخاب و عدم انتخاب سطرهای جدول با استفاده از Checkbox را فراهم نماید. رفرنس فایل اسکریپت جی کوئری را در قسمت head صفحه اضافه می کنیم.

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
[divider style=”normal” top=”20″ bottom=”20″]

پیشنهاد میکنم : استفاده از کنترل AJAX HoverMenu با GridView در ASP.NET

[divider style=”normal” top=”20″ bottom=”20″]

 

بلاک جاوااسکریپت زیر را در قسمت head قرار می دهیم:

<script type="text/javascript">                   
   $(document).ready(function() {

      var headerCheckbox = $('#GridView1 > tbody > tr > th > input:checkbox');

      headerCheckbox.click(function() {
         var headerChecked = $(this).attr('checked');
         var rowCheckboxes = $('#GridView1 > tbody > tr > td > input:checkbox');
         rowCheckboxes.attr('checked', headerChecked);
      }); 
            
   }); 
</script>

 

کد بالا به طور معمول از تابع  ready جی کوئری برای اضافه کردن چند دستور یا کد جی کوئری استفاده می شود. خط اول با استفاده از jQuery Selector به checkbox موجود در سطر اول گریدویو دسترسی پیدا می کند.

var headerCheckbox = $('#GridView1 > tbody > tr > th > input:checkbox');

 

زمانی که ما رفرنس مربوط به checkbox موجود در سطر عنوان را داشته باشیم، از تابع رویداد کلیک (click event handler) استفاده می کنیم که هر زمان روی checkbox سطر اول کلیک شد، به ما امکان اجرای یک سری کد را می دهد. درون این تابع، خط اول حالت کنونی checkbox را در متغیری با عنوان headerChecked ذخیره می کند. خط دوم رفرنس تمامی checkboxهای موجود در سطرهای گریدویو را دریافت کرده و با استفاده از تابع attr جی کوئری حالت آن ها را با حالت checkbox موجود در سطر عنوان جدول یکی می کند.

headerCheckbox.click(function() {
   var headerChecked = $(this).attr('checked');
   var rowCheckboxes = $('#GridView1 > tbody > tr > td > input:checkbox');
   rowCheckboxes.attr('checked', headerChecked);
});

پروژه خود را Build کرده و تست نمایید و روی checkbox سطر عنوان کلیک کنید، و می توانید checkboxهای سطرهای گرید ویو را انتخاب کرده و یا از حالت انتخاب درآورید.

[button color=”blue” size=”medium” link=”https://dl.mspsoft.com/dl2/BozorgMehr/JQuery_GridView_Checkboxes_www.mspsoft.com.zip” icon=”fa download” target=”true”]دانلود فایل نمونه[/button]
  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18366
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
مسعود شریفی پور
از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد انتخاب و عدم انتخاب سطرهای GridView با استفاده از Checkbox در Jquery

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

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

هیچ دیدگاهی نوشته نشده است.