用jQuery和jTemplates插件实现客户端分页的表格展现
2010-09-14 13:28:03 来源:WEB开发网一直以来觉得用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);
}
Tags:jQuery jTemplates 插件
编辑录入:爽爽 [复制链接] [打 印]- ››jquery .ajax方法 异步表单,接收服务器返回的数据...
- ››jquery 添加\删除 cookie
- ››jquery 正则表达式判断是否为正确邮箱格式
- ››jQuery EasyUI 数字框(NumberBox)用法
- ››JQuery中对option的添加、删除、取值
- ››JQuery实现下拉,单选,复选三大控件方法,
- ››jquery实现判断输入文字个数的代码
- ››jQuery bxCarousel实现图片滚动切换效果
- ››jQuery弹性滑动导航菜单
- ››jquery实现全选反选功能
- ››jQuery 屏蔽单个元素使用户无法点击
- ››jquery做复选框的全选、全部选、反选更加简单
更多精彩
赞助商链接