Wijmo更优美的jQueryUI部件集：C1WijmoGrids更多惊喜

本文中，我将给大家介绍一系列非常棒的 Wijmo Grids功能。我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧。

创新互联建站服务项目包括鹤山网站建设、鹤山网站制作、鹤山网页制作以及鹤山网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，鹤山网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到鹤山省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

 
 

 
 
    
 
 
        
 
 
            First Name
 
 
            
 
 
            Last Name
 
 
            Department
 
 
        
 
 
    
 
 
    
 
 
        
 
 
            Kevin
 
 
            Griffin
 
 
            Marketing
 
 
        
 
 
        
 
 
            Rich
 
 
            Dudley
 
 
            Marketing
 
 
        
 
 
        
 
 
            Chris
 
 
            Bannon
 
 
            Development
 
 
        
 
 
        
 
 
            Johnny
 
 
            Doe
 
 
            Management
 
 
        
 
 
        
 
 
            Tommy
 
 
            Tutone
 
 
            IT
 
 
        
 
 
        
 
 
            Joe
 
 
            Montana
 
 
            IT
 
 
        
 
 
        
 
 
            Ingio
 
 
            Montoya
 
 
            Freelance
 
 
        
 
 
        
 
 
            Luke
 
 
            Skywalker
 
 
            Jedi
 
 
        
 
 
    
 
 
 
 

 
 
    $(document).ready(function () {
 
 
$("#tableDepartmentInformation").wijgrid();
 
 
});
 
 

 
 
 

1. 排序

我们展示的第一个功能是基本的排序功能。我们只需设置allowSorting属性为true即可。

代码：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowSorting: true 
 
}); 

运行后，单击列头即可实现排序。

效果图：

2. 分页

现在我们将介绍C1 Wijmo Grids 的分页功能。当数据量很大时，分页功能可以使请求速度。分页设置同样很简单，我们只需要设置allowPaging 属性为 True 即可。Wijmo Grids 默认分页行数为 10，你可以通过设置pageSize 属性去自定义每页行数。

代码：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowPaging: true, 
 
pageSize: 2 
 
}); 

3. 过滤

过滤功能允许我们使用列中单元格值去过滤该列。例如，如果你想返回产品为ComponentOne 项。我们可以通过过滤功能实现。添加过滤功能，我们可以设置 showFilter 属性来实现。

代码：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
showFilter: true 
 
}); 

4. 分组

分组功能以分组所依据的列进行排序。例如，我们想以“区域列”进行分组。因为我们需要显示所有区域项，所以“区域列”过滤功能将实效。排序功能将以“组”为单位进行排序。使用C1 Wijmo Grids 分组功能我们需要设置 allowColMoving 和 showGroupArea 属性。之后，我们就可以拖拽列头到分组区域进行分组了。

代码：

$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
showGroupArea: true 
 
}); 
 
$("#tableDepartmentInformation").wijgrid( 
 
{ 
 
allowColMoving: true 
 
}); 

5. 结束语

我们仅使用几行代码，我们实现了 排序、分页、过滤和分组功能。我希望这篇文章能够唤起大家对 Wijmo 的兴趣。在下一篇文章中，我将继续介绍怎样使用后台代码来实现上述功能，感兴趣的朋友敬请关注哦～

示例下载

Wijmo下载，请进入Studio for ASP.NET Wijmo 2012 v1正式发布（2012.03.22更新）!