.NET Tips: سازگار كردن GridView با افزونه‌هاي jQuery

افزونه‌ها/پلاگين‌هاي زيادي جهت كار با table استاندارد HTML وجود دارند و خروجي رندر شده‌ي يك ASP.Net GridView هم در نهايت يك جدول است. فرض كنيد قصد داريم افزونه زير را به GridView استاندارد ASP.Net اعمال كنيم.
jQuery quickSearch plug-in

ظاهرا بدون مشكل خاصي اعمال مي‌گردد. براي مثال در هدر صفحه داريم: (شبيه به مثال موجود در سايت اصلي آن، جهت اعمال به GridView1)


<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.quicksearch.js" type="text/javascript"></script>

<script type="text/javascript">
 $(document).ready(function() {
     //جستجو در جدول
 $('table#<%=GridView1.ClientID %> tbody tr').quicksearch({
         position: 'before',
         attached: 'span#attachSearch',
         labelText: 'جستجو',
         isFieldset: true,
         loaderText: ' ... ',
         fixWidths: true
     });
 });
</script>

براي اعمال بر:
(در اينجا محل قرارگيري تكست باكس مربوط به جستجو، در span ايي با id مساوي attachSearch تنظيم شده است، مي‌توانيد از ID خود GridView هم استفاده كنيد.)


<span id="attachSearch"></span>
<br />
<asp:GridView ID="GridView1" runat="server"></asp:GridView>

نكته:
1- همانطور كه در مقاله مربوط به ClientID ذكر شد، هيچ الزامي ندارد كه ID‌ مربوط به GridView‌ شما براي مثال دقيقا همان GridView1 جهت استفاده در سمت كلاينت باشد و بسته به container آن، اين نام تركيبي از ID شيء(هاي) در بر گيرنده و شيء مورد نظر مي‌باشد. به همين جهت از GridView1.ClientID استفاده گرديد تا اسكريپت ما با آن مشكلي نداشته باشد.

2- خصوصيات ظاهري افزونه فوق از سلكتور quicksearch فايل css شما دريافت مي‌شوند. براي مثال:

.quicksearch
{
width:190px;
}

مشكل!
پس از هر بار جستجو، header مربوط به GridView محو مي‌شود، اما نمونه موجود در سايت اصلي افزونه، اين مشكل را ندارد. چرا؟!
GridView‌ مربوط به ASP.Net پس از رندر شدن، جدولي است كه تگ‌هاي thead را ندارد. اگر به سورس صفحه سايت افزونه دقت نمائيد، هدر جدول با تگ‌هاي thead محصور شده است اما GridView استاندارد ASP.Net به صورت پيش فرض اين‌كار را انجام نمي‌دهد و خروجي آن چيزي شبيه به جدول زير است: (هدر با th مشخص مي‌شود و از تگ thead خبري نيست)


<table >
<tr >
          <th scope="col">col1</th>
             <th scope="col">col2</th>
             <th scope="col">col3</th>
</tr>
     <tr>
       <td>1</td>
            <td>2</td>
            <td>3</td>
</tr>
.
.
.

حداقل دو راه حل براي رفع اين مشكل وجود دارد:
الف) راه حل سمت سرور
براي اضافه كردن thead بايد كمي كد نويسي كرد. پس از اينكه گريد شما بايند شد، چند سطر زير را اضافه كنيد:


         //سازگار با افزونه‌هاي جي كوئري
         if (GridView1.Rows.Count > 0)
         {
             //This replaces <td> with <th> and adds the scope attribute
             GridView1.UseAccessibleHeader = true;

             //This will add the <thead> and <tbody> elements
             GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

             //This adds the <tfoot> element.
             //Remove if you don't have a footer row
             //GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
         }

ب)راه حل سمت كلاينت
سطر مربوط به جستجو را به صورت زير هم مي‌توان نوشت:


$('table#<%=GridView1.ClientID %> tr:has(td)').quicksearch({

در اينجا به دنبال هرچي tr كه td دارد مي‌گرديم. به صورت پيش فرض در tr مربوط به هدر گريد، ما th داريم و نه td ، بنابراين مشكل محو شدن هدر به اين صورت حل خواهد شد.

نكته:
اگر مي‌خواهيد كه ناحيه مربوط به جستجوي افزونه فوق در پرينت صفحه ظاهر نشود به css صفحه چند سطر زير را اضافه كنيد:


@media print
{
     .quicksearch
     {
         display: none;
     }
}

تمرين!
افزونه جي كوئري زير را به يك ASP.Net GridView اعمال كنيد:
table sorter

۱۳۸۷/۱۱/۱۲

سازگار كردن GridView با افزونه‌هاي jQuery