WEB开发网
开发学院网页设计JavaScript 用jQuery和jTemplates插件实现客户端分页的表格展... 阅读

用jQuery和jTemplates插件实现客户端分页的表格展现

 2010-09-14 13:28:03 来源:WEB开发网   
核心提示:一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情,Microsoft ASP.NET Ajax提供了类似Sys.Date.DataTable和Sys.Dat.DataView这样的类来帮助实现客户端绑定,用jQuery和jTemplates插件实现客户端分页的表格展现,

一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。Microsoft ASP.NET Ajax提供了类似Sys.Date.DataTable和Sys.Dat.DataView这样的类来帮助实现客户端绑定,也可以用for循环来动态构建表格,但这些都显得很麻烦而且很不灵活。jQuery的jTemplates插件实现了一种灵活的方式来控制显示,它允许我们定义好一个显示模板,jQuery在展现数据时根据选择的模板来动态生成。这就类似于ASP.NET中的ItemTemplate,也和XSLT有些类似。通过这样的方式,你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。

jQuery官方网站给jTemplates的定义是:jTemplates is a template engine 100% in JavaScript.更多的信息可以参考http://jtemplates.tpython.com/。 接下来我们实现一个小例子来演示如何使用jTemplate去构建一个RSS阅读器。

创建RSS阅读器

RSS源通常都位于另外的domain中,而在AJAX中浏览器通常禁止cross-domain的访问,在这里,为了避开这个问题我们可以在服务端去取得数据。通常我们可以将这些方法做成WebMethod方法放到WebServices中,但这里我们可以将这些方法放到页面的cs文件中。需要注意的是,这个方法必须被声明为Static方法,而且要以WebMethod标注。这样做的目的是,只有在标注为WebMethod,客户端才能正常访问这个方法。而Static标记标识了这个方法不与任何这个页面的实例相关,而是而这个页面本身相关,对于任何一个实例而言都是相同的。所以在你调用的时候,你不需要与任何页面类的实例相关。

[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);
}

1 2 3 4 5  下一页

Tags:jQuery jTemplates 插件

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接