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

    在用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>");         }     } });

 

你已经完成了所有的工作，来看看成果吧：

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还有很多插件：比如DatePicker，BlockUI等，组合起来可以做很多有意思的应用：）

点击这里获取示例代码。

转载于:https://www.cnblogs.com/zlgcool/archive/2008/12/17/1356999.html