免费高清特黄a大片,九一h片在线免费看,a免费国产一级特黄aa大,国产精品国产主播在线观看,成人精品一区久久久久,一级特黄aa大片,俄罗斯无遮挡一级毛片

分享

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

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

 jQuery官方網(wǎng)站給jTemplates的定義是:jTemplates is a template engine 100% in JavaScript.更多的信息可以參考http://jtemplates./。 接下來(lái)我們實(shí)現(xiàn)一個(gè)小例子來(lái)演示如何使用jTemplate去構(gòu)建一個(gè)RSS閱讀器。 

創(chuàng)建 RSS 閱讀器  

       RSS源通常都位于另外的domain中,而在AJAX中瀏覽器通常禁止cross-domain的訪問(wèn),在這里,為了避開這個(gè)問(wèn)題我們可以在服務(wù)端去取得數(shù)據(jù)。通常我們可以將這些方法做成WebMethod方法放到WebServices中,但這里我們可以將這些方法放到頁(yè)面的cs文件中。需要注意的是,這個(gè)方法必須被聲明為Static方法,而且要以WebMethod標(biāo)注。這樣做的目的是,只有在標(biāo)注為WebMethod,客戶端才能正常訪問(wèn)這個(gè)方法。而Static標(biāo)記標(biāo)識(shí)了這個(gè)方法不與任何這個(gè)頁(yè)面的實(shí)例相關(guān),而是而這個(gè)頁(yè)面本身相關(guān),對(duì)于任何一個(gè)實(shí)例而言都是相同的。所以在你調(diào)用的時(shí)候,你不需要與任何頁(yè)面類的實(shí)例相關(guān)。

[WebMethod]

public static IEnumerable GetFeeds(int PageSize,int PageNumber)

{

    string strFeedUrl = System.Configuration.ConfigurationManager.AppSettings["FeedUrl"];

    XDocument feedXML = XDocument.Load(strFeedUrl);

 

    var feeds = from feed in feedXML.Descendants("item")

                select new

                {

                    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)

    return feeds.Skip((PageNumber - 1) * PageSize).Take(PageSize);

}

 在上邊的方法中設(shè)定了RSS的地址,并通過(guò)LINQ to XML來(lái)取得我們想要的屬性。Skip和Take函數(shù)聯(lián)合起來(lái)實(shí)現(xiàn)了一個(gè)分頁(yè)的功能。

  通過(guò) jQuery 調(diào)用 Page Method  

         jQuery.Ajax方法實(shí)現(xiàn)了用Ajax的方式來(lái)請(qǐng)求一個(gè)頁(yè)面并設(shè)定回調(diào)函數(shù)來(lái)處理相應(yīng)狀態(tài)和結(jié)果。在我們的實(shí)例中,需要請(qǐng)求上邊寫的PageMethod并處理返回結(jié)果。

function DisplayRSS(page) {

    $.ajax({

        type: "POST",

        url: "Default.aspx/GetFeeds",

        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ù)中我們什么也沒有做,先來(lái)看看result到底是個(gè)什么東西。在瀏覽器中設(shè)置允許調(diào)試腳本,定義一個(gè)函數(shù)供回調(diào)函數(shù)中調(diào)用,然后設(shè)定斷點(diǎn)在新的函數(shù)中。

          我們看到在服務(wù)端將數(shù)據(jù)以IEnumerable返回后實(shí)際上在result中包含的是一個(gè)JSON表示的數(shù)據(jù)集合。每個(gè)對(duì)象含有Date, Description, Link和Title屬性,這和前邊用LINQ取XML字段時(shí)是相符的。因?yàn)槟阋呀?jīng)擁有了這個(gè)數(shù)據(jù)集合,接下來(lái)所要做的就是在客戶端通過(guò)某種方式展現(xiàn)出來(lái)。你也許會(huì)想到用動(dòng)態(tài)拼接Table的方式來(lái)做,但這并不靈活。jTemplates提供了更優(yōu)雅的方式來(lái)實(shí)現(xiàn)。

  jTemplate 來(lái)展現(xiàn)數(shù)據(jù)  

jTemplate就把數(shù)據(jù)展現(xiàn)的方式和業(yè)務(wù)邏輯分開來(lái),允許你定義好一個(gè)模板,然后再運(yùn)行時(shí)會(huì)根據(jù)模板的內(nèi)容來(lái)render. 和ASP.NET中的綁定相似,也有一個(gè)特定的符號(hào)來(lái)表示綁定的上下文對(duì)象$T。$T就類似于上圖中的result.d[n]—某一個(gè)業(yè)務(wù)對(duì)象,需要展現(xiàn)哪個(gè)屬性后邊直接跟.PropertyName即可。因?yàn)楸砀竦男惺强勺兊?,所以這里就類似于XSLT中一樣來(lái)控制動(dòng)態(tài)生成. 

<table id="RSSTable" cellspacing="0">

 <thead>

    <tr>

      <th width="80">Date</th>

      <th>Title / Excerpt</th>

    </tr>

 </thead> 

 <tbody>

    {#foreach $T.d as post}

    <tr>

      <td rowspan="2">{$T.post.Date}</td>

      <td><a href="{$T.post.Link}">{$T.post.Title}</a></td>

    </tr>

    <tr>

      <td>{$T.post.Description}</td>

    </tr>

    {#/for}

 </tbody>

</table>

在頁(yè)面請(qǐng)求完P(guān)ageMethod并成功返回后可以來(lái)應(yīng)用模板展現(xiàn)數(shù)據(jù)了: 

 

$(document).ready(function() {

 // On page load, display the first page of results.

 DisplayRSS(1);

});

 

function DisplayRSS(page) {

……

success: function(msg) {

    // Render the resulting data, via template.

ApplyTemplate(msg);

    // TODO: Update navigation status

}

……

}

 

function ApplyTemplate(msg) {

 $('#Container').setTemplateURL('Template/RSSTable.htm',

                                 null, { filter_data: false });

 $('#Container').processTemplate(msg);

}

 現(xiàn)在為止我們只取得了數(shù)據(jù)并展現(xiàn)了特定的條數(shù)而無(wú)法實(shí)現(xiàn)分頁(yè)??雌饋?lái)一切都好—除了分頁(yè)。 

增加客戶端分頁(yè)功能  

為了實(shí)現(xiàn)分頁(yè)首先需要知道頁(yè)碼總數(shù),這樣我們可以簡(jiǎn)單的通過(guò)Previous | Next來(lái)實(shí)現(xiàn)導(dǎo)航。假設(shè)一下在服務(wù)端我們需要什么:總頁(yè)數(shù),頁(yè)大小,當(dāng)前頁(yè),判斷并控制Previous|Next導(dǎo)航的有效性及其動(dòng)作。ok,明白我們所要做的步驟:

·         獲取頁(yè)總數(shù) – 通過(guò)Page Method來(lái)返回

·         控制頁(yè)大小和當(dāng)前頁(yè)

·         控制Previous | Next導(dǎo)航的有效性

·         實(shí)現(xiàn)Previous | Next導(dǎo)航動(dòng)作 

首先,在Template中增加頁(yè)面導(dǎo)航:

<div id="Paging">

    <a id="PrevPage" class="paging">&laquo; Previous Page</a>

    <a id="NextPage" class="paging">Next Page &raquo;</a>

</div>

 其次,聲明獲取頁(yè)面總數(shù)或者條目總數(shù)的Page Method. 和前邊獲取數(shù)據(jù)源的方法很類似我們除了不需要返回任何XML的屬性值外僅僅調(diào)用Count方法即可。

    [WebMethod]

    public static int GetFeedsCount()

    {

        string strFeedUrl = System.Configuration.ConfigurationManager.AppSettings["FeedUrl"];

 

        XDocument feedXML = XDocument.Load(strFeedUrl);

 

        return feedXML.Descendants("item").Count();

    }

 

設(shè)置默認(rèn)的頁(yè)面大小,并在顯示數(shù)據(jù)后更新導(dǎo)航欄狀態(tài)。在頁(yè)面中我們需要請(qǐng)求這個(gè)PageMethod并來(lái)計(jì)算總的頁(yè)數(shù)。

var currentPage = 1;

var lastPage = 1;

var pageSize = 5;

 

function GetRSSItemCount() {

 $.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 number of pages.

      lastPage = Math.ceil(msg.d / pageSize);

      // TODO: Update navigation status

    }

 });

}

接下來(lái)就是實(shí)現(xiàn)// TODO: Update navigation status標(biāo)記的內(nèi)容了:更新導(dǎo)航欄的狀態(tài)及其動(dòng)作。當(dāng)前頁(yè)的值存儲(chǔ)在currentPage變量中,lastPage告訴我們哪一頁(yè)是最后頁(yè),通過(guò)這兩個(gè)參數(shù)可以很容易的控制導(dǎo)航狀態(tài)。而因?yàn)樗麄兪侨肿兞浚詧?zhí)行導(dǎo)航時(shí)只需要通過(guò)簡(jiǎn)單的++/--操作,最終請(qǐng)求GetFeeds方法時(shí)會(huì)取得相應(yīng)頁(yè)的數(shù)據(jù)。 

function UpdatePaging() {

 // If we're not on the first page, enable the "Previous" link.

 if (currentPage != 1) {

    $('#PrevPage').attr('href', '#');

    $('#PrevPage').click(PrevPage);

 }

 

 // If we're not on the last page, enable the "Next" link.

 if (currentPage != lastPage) {

    $('#NextPage').attr('href', '#');

    $('#NextPage').click(NextPage);

 }

}

 

function NextPage(evt) {

 // Prevent the 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);

}

 

function PrevPage(evt) {

 // Prevent the browser from navigating needlessly to #.

 evt.preventDefault();

 

 // Entertain the user while the previous page is loaded.

 DisplayProgressIndication();

 

 // Load and render the previous page of results, and

 // decrement the current page number.

 DisplayRSS(--currentPage);

}

用UpdatePaging函數(shù)替換上邊標(biāo)注的TODO部分,完整的分頁(yè)功能即可實(shí)現(xiàn)。當(dāng)然,這里的分頁(yè)顯得很粗糙,但你可以通過(guò)擴(kuò)展其樣式來(lái)做出更豐富的導(dǎo)航欄。另外示例中也提供了loading時(shí)提示用戶,這里不盡具表。一個(gè)很好的啟示是方便的展現(xiàn)LIST并提供簡(jiǎn)單的客戶端分頁(yè)。

 

 

點(diǎn)擊這里下載實(shí)例項(xiàng)目。(Vs.net 2008)


    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多