×
400 028 6601

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

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

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

 

Wijmo 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

 

 


  1.  
  2.  

  3.  
  4.  
  5.     
     
  6.  
  7.         
     
  8.  
  9.             First Name
     
  10.  
  11.             
     
  12.  
  13.             Last Name
     
  14.  
  15.             Department
     
  16.  
  17.         
     
  18.  
  19.     
     
  20.  
  21.     
     
  22.  
  23.         
     
  24.  
  25.             Kevin
     
  26.  
  27.             Griffin
     
  28.  
  29.             Marketing
     
  30.  
  31.         
     
  32.  
  33.         
     
  34.  
  35.             Rich
     
  36.  
  37.             Dudley
     
  38.  
  39.             Marketing
     
  40.  
  41.         
     
  42.  
  43.         
     
  44.  
  45.             Chris
     
  46.  
  47.             Bannon
     
  48.  
  49.             Development
     
  50.  
  51.         
     
  52.  
  53.         
     
  54.  
  55.             Johnny
     
  56.  
  57.             Doe
     
  58.  
  59.             Management
     
  60.  
  61.         
     
  62.  
  63.         
     
  64.  
  65.             Tommy
     
  66.  
  67.             Tutone
     
  68.  
  69.             IT
     
  70.  
  71.         
     
  72.  
  73.         
     
  74.  
  75.             Joe
     
  76.  
  77.             Montana
     
  78.  
  79.             IT
     
  80.  
  81.         
     
  82.  
  83.         
     
  84.  
  85.             Ingio
     
  86.  
  87.             Montoya
     
  88.  
  89.             Freelance
     
  90.  
  91.         
     
  92.  
  93.         
     
  94.  
  95.             Luke
     
  96.  
  97.             Skywalker
     
  98.  
  99.             Jedi
     
  100.  
  101.         
     
  102.  
  103.     
     
  104.  
  105.  
  106.  

  107.  
  108.  
  109.     $(document).ready(function () {
     
  110.  
  111. $("#tableDepartmentInformation").wijgrid();
     
  112.  
  113. });
     
  114.  

  115.  
  116.  
  117.  

 

 

1. 排序

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

代码：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. allowSorting: true 
  6.  
  7. }); 

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

效果图：

Wijmo 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

2. 分页

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

代码：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. allowPaging: true, 
  6.  
  7. pageSize: 2 
  8.  
  9. }); 

Wijmo 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

3. 过滤

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

代码：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. showFilter: true 
  6.  
  7. }); 

Wijmo 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

4. 分组

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

代码：

  1. $("#tableDepartmentInformation").wijgrid( 
  2.  
  3. { 
  4.  
  5. showGroupArea: true 
  6.  
  7. }); 
  8.  
  9. $("#tableDepartmentInformation").wijgrid( 
  10.  
  11. { 
  12.  
  13. allowColMoving: true 
  14.  
  15. }); 

Wijmo 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

 

5. 结束语

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

 

示例下载

 

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


当前文章：Wijmo更优美的jQueryUI部件集：C1WijmoGrids更多惊喜
链接地址：http://mzwzsj.com/article/pdicjg.html

其他资讯