用jQuery幫GridView排序
GridView一直都是我很喜歡用的資料控制項，功能強大的GridView除了可以顯示資料以外，還可以幫我們做到排序、分頁的功能。如果覺得在排序或是分頁的時候，畫面會閃一下很討厭的話，再加上Update Panel把他包起來，這樣通常都可以滿足老闆的需要。
不過不知道大家有沒有碰過當你的畫面上有很多控制項或是GridView的資料筆數相當多的時候，包在Update Panel裡面的GridView要做排序的動作就要花好幾秒的時間，當然這時候雖然青菜工程師如我一定是沒關係的，誰叫你要畫面不會閃，但老闆一定不能接受的，青菜工程師只好想辦法改了。
既然要畫面不閃，但是用Update Panel來做頁面上的資料要太多，傳回去又傳回來花太多時間，既然只是排序的功能，那就在Client端做吧。
前一陣子才去買了Learning jQuery，不過剛看完前三章而已，立刻先往後翻從書上找出排序的範例，雖然可以排序但有點殘缺，沒關係再加以改造一下吧。
$(document).ready(function() {
$('table.SortTable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
if ($(this).is('.SortColumn')) {
$(this).click(function() {
var sColumnTitile;
switch (column) {
case 0:
sColumnTitile = 'title';
break;
case 1:
sColumnTitile = 'link';
break;
case 2:
sColumnTitile = 'pubDate';
break;
case 3:
sColumnTitile = 'description';
break;
case 4:
sColumnTitile = 'create';
break;
}
var bSort = ($(this).html().indexOf('↑') > -1);
if (bSort)
$(this).html(sColumnTitile + '↓');
else
$(this).html(sColumnTitile + '↑');
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase();
if (bSort) {
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
}
else {
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
}
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
})
});
};
});
});
});
GridView也要加一些CssClass的定義好讓jQuery可以找到
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="SortTable">
<Columns>
<asp:TemplateField HeaderText="title" HeaderStyle-CssClass="SortColumn">
<ItemTemplate>
<%# Eval("title")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="link" HeaderStyle-CssClass="SortColumn">
<ItemTemplate>
<%# Eval("link")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="pubDate" HeaderStyle-CssClass="SortColumn">
<ItemTemplate>
<%# Convert.ToDateTime(Eval("pubDate")).ToString("yyyy/MM/dd HH:ss")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="description" HeaderStyle-CssClass="SortColumn">
<ItemTemplate>
<%# Eval("description")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="create" HeaderStyle-CssClass="SortColumn">
<ItemTemplate>
<%# Eval("creator")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
耶！怎麼排序的時候連標題也一起排下去了，原來GridView render成html的時候沒有tbody的tag，這這，初學jQuery的青菜工程師要怎麼去改呢，在百試不得其的解的情況下，還是想辦法讓GridView可以輸入tbody的tag吧，還真的被我找到方法。這要從.cs下手[參考來源]。
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("rss.xml"));
GridView1.DataSource = ds.Tables[2];
GridView1.DataBind();
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
就這樣沒有花太多時間，就完成用jQuery幫GridView做排序，jQuery真是不錯用。喝～喝～喝～打完收工。
---------------
這是簽名檔，I love Dotblogs
