使用用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等，组合起来可以做很多有意思的应用：）

点击这里获取示例代码。