用jQuery與jTemplates插件實(shí)現(xiàn)客戶端分頁的表格展現(xiàn)

1、用jQuery和jTemplates插件實(shí)現(xiàn)客戶端分頁的表格展現(xiàn)一直以來覺得用JSON和JavaScript在客戶端綁定數(shù)據(jù)給一個表格或者Grid是件很麻煩的事情。Microsoft ASP.NET Ajax提供了類似和這樣的類來幫助實(shí)現(xiàn)客戶端綁定，也可以用for循環(huán)來動態(tài)構(gòu)建表格，但這些都顯得很麻煩而且很不靈活。jQuery的jTemplates插件實(shí)現(xiàn)了一種靈活的方式來控制顯示，它允許我們定義好一個顯示模板，jQuery在展現(xiàn)數(shù)據(jù)時根據(jù)選擇的模板來動態(tài)生成。這就類似于ASP.NET中的ItemTemplate，也和XSLT有些類似。通過這樣的方式，你可以很容易的在客戶端通過自定義模板以很靈

2、活的方式展現(xiàn)列表數(shù)據(jù)。jQuery官方網(wǎng)站給jTemplates的定義是：jTemplates is a template engine 100% in JavaScript.更多的信息可以參考。接下來我們實(shí)現(xiàn)一個小例子來演示如何使用jTemplate去構(gòu)建一個RSS閱讀器。創(chuàng)建RSS閱讀器 RSS源通常都位于另外的domain中，而在AJAX中瀏覽器通常禁止cross-domain的訪問，在這里，為了避開這個問題我們可以在服務(wù)端去取得數(shù)據(jù)。通常我們可以將這些方法做成WebMethod方法放到WebServices中，但這里我們可以將這些方法放到頁面的cs文件中。需要注意的是，這個方法必須被聲

3、明為Static方法，而且要以WebMethod標(biāo)注。這樣做的目的是，只有在標(biāo)注為WebMethod，客戶端才能正常訪問這個方法。而Static標(biāo)記標(biāo)識了這個方法不與任何這個頁面的實(shí)例相關(guān)，而是而這個頁面本身相關(guān)，對于任何一個實(shí)例而言都是相同的。所以在你調(diào)用的時候，你不需要與任何頁面類的實(shí)例相關(guān)。WebMethodpublicstaticIEnumerableGetFeeds(intPageSize,intPageNumber)stringstrFeedUrl = System.Configuration.ConfigurationManager.AppSettingsFeedUrl;XDoc

4、umentfeedXML =XDocument.Load(strFeedUrl);varfeeds =fromfeedinfeedXML.Descendants(item)selectnew Date =DateTime.Parse(feed.Element(pubDate).Value).ToShortDateString(), Title = feed.Element(title).Value, Link = feed.Element(link).Value, Description = feed.Element(description).Value, ;/paging. (LINQ)re

5、turnfeeds.Skip(PageNumber - 1) * PageSize).Take(PageSize);在上邊的方法中設(shè)定了RSS的地址，并通過LINQ to XML來取得我們想要的屬性。Skip和Take函數(shù)聯(lián)合起來實(shí)現(xiàn)了一個分頁的功能。通過jQuery調(diào)用Page Method jQuery.Ajax方法實(shí)現(xiàn)了用Ajax的方式來請求一個頁面并設(shè)定回調(diào)函數(shù)來處理相應(yīng)狀態(tài)和結(jié)果。在我們的實(shí)例中，需要請求上邊寫的PageMethod并處理返回結(jié)果。functionDisplayRSS(page) $.ajax( type:POST, url:Default.aspx/GetFeeds

6、, data:PageSize:+ pageSize +, PageNumber:+ page +, contentType:application/json; charset=utf-8, dataType:json, success:function(msg) /TODO:Show the result as a table. alert(msg); );在success的回調(diào)函數(shù)中我們什么也沒有做，先來看看result到底是個什么東西。在瀏覽器中設(shè)置允許調(diào)試腳本，定義一個函數(shù)供回調(diào)函數(shù)中調(diào)用，然后設(shè)定斷點(diǎn)在新的函數(shù)中。我們看到在服務(wù)端將數(shù)據(jù)以IEnumerable返回后實(shí)際上在resul

7、t中包含的是一個JSON表示的數(shù)據(jù)集合。每個對象含有Date, Description, Link和Title屬性，這和前邊用LINQ取XML字段時是相符的。因?yàn)槟阋呀?jīng)擁有了這個數(shù)據(jù)集合，接下來所要做的就是在客戶端通過某種方式展現(xiàn)出來。你也許會想到用動態(tài)拼接Table的方式來做，但這并不靈活。jTemplates提供了更優(yōu)雅的方式來實(shí)現(xiàn)。用jTemplate來展現(xiàn)數(shù)據(jù)jTemplate就把數(shù)據(jù)展現(xiàn)的方式和業(yè)務(wù)邏輯分開來，允許你定義好一個模板，然后再運(yùn)行時會根據(jù)模板的內(nèi)容來render.和ASP.NET中的綁定相似，也有一個特定的符號來表示綁定的上下文對象$T。$T就類似于上圖中的result.

8、dn某一個業(yè)務(wù)對象，需要展現(xiàn)哪個屬性后邊直接跟.PropertyName即可。因?yàn)楸砀竦男惺强勺兊?，所以這里就類似于XSLT中一樣來控制動態(tài)生成.DateTitle / Excerpt #foreach $T.d as post$T.post.Date$T.post.Title$T.post.Description #/for在頁面請求完P(guān)ageMethod并成功返回后可以來應(yīng)用模板展現(xiàn)數(shù)據(jù)了：$(document).ready(function() / On page load, display the first page of results.DisplayRSS(1););functi

9、onDisplayRSS(page) success:function(msg) / Render the resulting data, via template.ApplyTemplate(msg); / TODO: Update navigation statusfunctionApplyTemplate(msg) $(#Container).setTemplateURL(Template/RSSTable.htm,null, filter_data:false);$(#Container).processTemplate(msg);現(xiàn)在為止我們只取得了數(shù)據(jù)并展現(xiàn)了特定的條數(shù)而無法實(shí)現(xiàn)分

10、頁?？雌饋硪磺卸己贸朔猪?。增加客戶端分頁功能為了實(shí)現(xiàn)分頁首先需要知道頁碼總數(shù)，這樣我們可以簡單的通過Previous | Next來實(shí)現(xiàn)導(dǎo)航。假設(shè)一下在服務(wù)端我們需要什么：總頁數(shù)，頁大小，當(dāng)前頁，判斷并控制Previous|Next導(dǎo)航的有效性及其動作。ok,明白我們所要做的步驟：獲取頁總數(shù)通過Page Method來返回控制頁大小和當(dāng)前頁控制Previous | Next導(dǎo)航的有效性實(shí)現(xiàn)Previous | Next導(dǎo)航動作首先，在Template中增加頁面導(dǎo)航：Previous PageNext Page其次，聲明獲取頁面總數(shù)或者條目總數(shù)的Page Method.和前邊獲取數(shù)據(jù)源的方法很

11、類似我們除了不需要返回任何XML的屬性值外僅僅調(diào)用Count方法即可。 WebMethodpublicstaticintGetFeedsCount() stringstrFeedUrl = System.Configuration.ConfigurationManager.AppSettingsFeedUrl;XDocumentfeedXML =XDocument.Load(strFeedUrl);returnfeedXML.Descendants(item).Count(); 設(shè)置默認(rèn)的頁面大小，并在顯示數(shù)據(jù)后更新導(dǎo)航欄狀態(tài)。在頁面中我們需要請求這個PageMethod并來計(jì)算總的頁數(shù)。va

12、rcurrentPage = 1;varlastPage = 1;varpageSize = 5;functionGetRSSItemCount() $.ajax( type:POST, url:Default.aspx/GetFeedsCount, data:, contentType:application/json; charset=utf-8, dataType:json, success:function(msg) / msg.d will contain the total number of items, as/an integer. Divide to find total n

13、umber of pages. lastPage = Math.ceil(msg.d / pageSize);/ TODO: Update navigation status );接下來就是實(shí)現(xiàn)/ TODO: Update navigation status標(biāo)記的內(nèi)容了：更新導(dǎo)航欄的狀態(tài)及其動作。當(dāng)前頁的值存儲在currentPage變量中，lastPage告訴我們哪一頁是最后頁，通過這兩個參數(shù)可以很容易的控制導(dǎo)航狀態(tài)。而因?yàn)樗麄兪侨肿兞?，所以?zhí)行導(dǎo)航時只需要通過簡單的+/-操作，最終請求GetFeeds方法時會取得相應(yīng)頁的數(shù)據(jù)。functionUpdatePaging() / If wer

14、e not on the first page, enable the Previous link.if(currentPage != 1) $(#PrevPage).attr(href,#); $(#PrevPage).click(PrevPage);/ If were not on the last page, enable the Next link.if(currentPage != lastPage) $(#NextPage).attr(href,#); $(#NextPage).click(NextPage);functionNextPage(evt) / Prevent the

15、browser from navigating needlessly to #.evt.preventDefault();/ Entertain the user while the previous page is loaded.DisplayProgressIndication();/ Load and render the next page of results, and/increment the current page number.DisplayRSS(+currentPage);functionPrevPage(evt) / Prevent the browser from navigating needlessly to #.evt.preventDefault();/ Entertain the user while the previous page is loaded.DisplayProgressIndication();/ Load and render the