افزونه‌ها/پلاگين‌هاي زيادي جهت كار با 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({
نكته:
اگر مي‌خواهيد كه ناحيه مربوط به جستجوي افزونه فوق در پرينت صفحه ظاهر نشود به css صفحه چند سطر زير را اضافه كنيد:
@media print
{
.quicksearch
{
display: none;
}
}
تمرين!
افزونه جي كوئري زير را به يك ASP.Net GridView اعمال كنيد:
table sorter
