使用用jQuery和QuickSearch、TableSorter插件来增强界面交互

Advertisement

在用jQuery和jTemplates插件实现客户端分页的表格展现一文中我们了解过jTempalte插件,它帮助我们可以很轻松的通过订制模板来展现JSON数据集合,并且可以在客户端实现分页。jQuery提供了大量的Plug-in,Quick Search允许我们通过将某个HTML元素附加给Search作为数据源来在数据源中进行动态搜索;而Table Sorter插件则允许我们不用太多的代码就可以实现对表格的排序支持。今天我们就来看看如何使用Quick Search和Table Sorter插件来让我们的界面具有更好的交互性。

Quick Search

通过Quick Search你可以很容易的在你的页面中提供一个动态查询的功能,虽然这个查询只是在基于页面的某个HTML所容纳的数据作为数据源的,但这已经足够让你激动,不是吗?它确实不用你做太多的工作,仅仅是几行Javascript代码而已。

首先你需要得到QuickSearch.js,你可以从http://rikrikrik.com/jquery/quicksearch/#download下载得到。然后我们就来构建一个页面吧,复习一下上次的内容,用jQuery来调用页面内的方法并通过模板来显示数据。很简单,我们声明一个页面方法来获取cnBlogs首页的blog列表:


[WebMethod]

public static IEnumerable GetBlogList()

{

string strBlogUrl = "http://www.cnblogs.com/rss";

XDocument doc = XDocument.Load(strBlogUrl);

var items = from item in doc.Descendants("item")

select new

{

Title = item.Element("title").Value,

Link = item.Element("link").Value,

Author = item.Element("author").Value,

Published = System.DateTime.Parse(item.Element("pubDate").Value).ToShortDateString(),

Description = item.Element("description").Value

};

return items;

}

在页面加载完成时我们通过jQuery请求得到blog列表信息并通过应用模板来展现:


$(document).ready(function() {

$("#content").html("<img src='ajax-loader.gif' alt="' />");

DisplayBlogs();

});

function DisplayBlogs() {

$.ajax({

type: "POST",

url: "Default.aspx/GetBlogList",

data: "{}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(msg) {

ApplyTemplate(msg);

}

});

}

数据已经通过模板展现出来了,那接下来的事情就是添加动态搜索的功能。由于Quick Search是以页面上承载的数据作为搜索源的(通过attached属性来讲某个元素赋予Quick Search作为源),这其实就是我们要做的所有事情—设置搜索源。当然,我们还可以设置更多的参数来让它更符合我们的要求。具体的参数可以参考:http://rikrikrik.com/jquery/quicksearch/#options

当数据绑定完成后我们希望添加动态搜索功能,所以我们的代码应该加在success:function(msg)中,当应用玩模板,数据表被顺利生成后我们就将这个表attach给Quick Sorter来实现搜索。下边的代码设置了在table的上方显示搜索框,并在输入完搜索条件2000秒后触发搜索事件:


$("#blogList tbody tr").quicksearch({

labelText: 'Search: ',

attached: '#blogList',

position: 'before',

delay: 2000,

loaderText: '<img src="Ajax-loader.gif" alt="\" height="20px" />',

onAfter: function() {

if ($('#blogList tbody tr:visible').length == 0) {

$("#blogList tbody").html("<tr><td colspan='4'>No matched data</td></tr>");

}

}

});

你已经完成了所有的工作,来看看成果吧:

使用用jQuery和QuickSearch、TableSorter插件来增强界面交互
使用用jQuery和QuickSearch、TableSorter插件来增强界面交互

Table Sorter

接下来我们通过Table Sorter来添加排序的功能。你可以通过以下代码对名为myTable的Table添加排序支持,但没有任何样式或者默认的排序,而是实现反转排序。


$(document).ready(function()
{
$("#myTable").tablesorter();
}
);

以下代码则给明为myTable的table添加了默认的排序:第一列和第三列。


$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);

你可以指定更多的参数来让tablesorter更符合你的期望。请参考http://tablesorter.com/docs/#Configuration来获取参数。

在本例子中,我们想指定Header的样式来指示排序的不同状态。首先我们定义几个样式来控制header:


th.header {

background-image: url(../img/bg.gif);

cursor: pointer;

font-weight: bold;

background-repeat: no-repeat;

background-position: center left;

padding-left: 20px;

border-right: 1px solid #dad9c7;

margin-left: -1px;

}

th.headerSortUp {

background-image: url(../img/asc.gif);

background-color: #3399FF;

}

th.headerSortDown {

background-image: url(../img/desc.gif);

background-color: #3399FF;

}

注意:将Header类定义在headerSortUp和headerSortDown类之前,因为header是默认的TH的样式,在你点Header来排序后,TableSorter会将HeaderSortUp或headerSortDown类附加到Class属性里,这时,如果先定义了headerSortUp/headerSortDown,根据Css里应用规则,asc.gif和desc.gif不会被调入。

然后通过给blogList表格应用tablesorter方法就可以实现:


$("#blogList").tablesorter({ cssAsc: "headerSortUp", cssDesc: "headerSortDown", cssHeader: "header" });

看看处理结果吧:

使用用jQuery和QuickSearch、TableSorter插件来增强界面交互

jQuery还有很多插件:比如DatePicker,BlockUI等,组合起来可以做很多有意思的应用:)

点击这里获取示例代码。

Similar Posts:

  • 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现页面内的元素淡入淡出效果. 源码/演示 2. HighlightFade 该插件可以实现高亮.缩放等效果. 源码/演示 3. Dynamic Page / Replacing Content 使用按钮实现网页内容的动态切换. 源码 / 演示 4. jqFancyTransitions 这是一个易于使

  • jQuery表单验证及jQuery自动完成提示插件

    转载于:http://www.cnblogs.com/qiantuwuliang/archive/2009/08/03/1537213.html 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest). 二.前言 研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控

  • 使用 jQuery 创建自己的插件

    jQuery 允许您创建自己的插件来扩展 jQuery 的功能,也可以以此回报 jQuery 社区.本文介绍创建自己的插件的步骤,并介绍如何让它在出现在 jQuery 插件社区网页上. 查看本系列更多内容 |0 评论: Michael Abernethy, 产品开发经理, Optimal Auctions 2009 年 7 月 20 日 内容 在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 简介 在该系列之前的文章 使用 jQuery,第 2 部分:中级 jQuer

  • 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

  • jquery文件上传插件|进度条

    jquery文件上传插件|进度条 一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参数配置示例: 二.

  • jquery 自动完成 Autocomplete插件汇总

    1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/workshop/jquery/autocomplete.htm 下载:http://www.pengoworks.com/workshop/jquery/autocomplete.htm DEMO:http://www.pengoworks.com/workshop/jquery/autocomplete.ht

  • jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuery操作元素的属性与样式 jQuery框架学习第五天:事件与事件对象 jQuery框架学习第六天:jQuery中的Ajax应用 jQuery框架学习第七天:jQuery动画–jQuery让页面动起来! jQuery框架学习第八天:ASP.NET jQuery实施方案 jQuery框架学习第九天:j

  • Jquery下来多选插件 jquery.multiselect.js

    Jquery下来多选插件 jquery.multiselect.js http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

  • 一个轻量级的jQuery拖拽排序插件 - HTML5 Sortable

    日期:2012-7-26 来源:GBin1.com 在线演示 本地下载 如果大家提到拖放相关插件 的话,肯定会想到jQuery UI ,这个UI类库包含了你需要用到的几乎所有组件,但是如果你只想使用jQuery UI 中的某一个组件,例如,拖放组件的话,调用如此大的一个类库会有有杀鸡用宰牛刀的感觉,今天这里我们将介绍一个轻量级的jQuery drag and drop 插件 - HTML5 Sortable .它能够帮助你创建可拖拽的列表和网格元素,希望大家喜欢! 主要特性 非常小(压缩版1kb

  • jQuery二维码插件-改自MyQRCode,支持中文字符

    jQuery二维码插件-改自MyQRCode /** * @author Paul Chan / KF Software House * http://www.kfsoft.info * * Version 0.5 * Copyright (c) 2010 KF Software House * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * */ (function