Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜
更新:HHH   时间:2023-1-7


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

 

 

 

  1. <BR> 
  2.  
  3. <table id="tableDepartmentInformation"><BR> 
  4.  
  5.     <thead><BR> 
  6.  
  7.         <tr><BR> 
  8.  
  9.             <th>First Name<BR> 
  10.  
  11.             </th><BR> 
  12.  
  13.             <th>Last Name</th><BR> 
  14.  
  15.             <th>Department</th><BR> 
  16.  
  17.         </tr><BR> 
  18.  
  19.     </thead><BR> 
  20.  
  21.     <tbody><BR> 
  22.  
  23.         <tr><BR> 
  24.  
  25.             <td>Kevin</td><BR> 
  26.  
  27.             <td>Griffin</td><BR> 
  28.  
  29.             <td>Marketing</td><BR> 
  30.  
  31.         </tr><BR> 
  32.  
  33.         <tr><BR> 
  34.  
  35.             <td>Rich</td><BR> 
  36.  
  37.             <td>Dudley</td><BR> 
  38.  
  39.             <td>Marketing</td><BR> 
  40.  
  41.         </tr><BR> 
  42.  
  43.         <tr><BR> 
  44.  
  45.             <td>Chris</td><BR> 
  46.  
  47.             <td>Bannon</td><BR> 
  48.  
  49.             <td>Development</td><BR> 
  50.  
  51.         </tr><BR> 
  52.  
  53.         <tr><BR> 
  54.  
  55.             <td>Johnny</td><BR> 
  56.  
  57.             <td>Doe</td><BR> 
  58.  
  59.             <td>Management</td><BR> 
  60.  
  61.         </tr><BR> 
  62.  
  63.         <tr><BR> 
  64.  
  65.             <td>Tommy</td><BR> 
  66.  
  67.             <td>Tutone</td><BR> 
  68.  
  69.             <td>IT</td><BR> 
  70.  
  71.         </tr><BR> 
  72.  
  73.         <tr><BR> 
  74.  
  75.             <td>Joe</td><BR> 
  76.  
  77.             <td>Montana</td><BR> 
  78.  
  79.             <td>IT</td><BR> 
  80.  
  81.         </tr><BR> 
  82.  
  83.         <tr><BR> 
  84.  
  85.             <td>Ingio</td><BR> 
  86.  
  87.             <td>Montoya</td><BR> 
  88.  
  89.             <td>Freelance</td><BR> 
  90.  
  91.         </tr><BR> 
  92.  
  93.         <tr><BR> 
  94.  
  95.             <td>Luke</td><BR> 
  96.  
  97.             <td>Skywalker</td><BR> 
  98.  
  99.             <td>Jedi</td><BR> 
  100.  
  101.         </tr><BR> 
  102.  
  103.     </tbody><BR> 
  104.  
  105. </table><P></P> 
  106.  
  107. <P><script type="text/javascript"><BR> 
  108.  
  109.     $(document).ready(function () {<BR> 
  110.  
  111. $("#tableDepartmentInformation").wijgrid();<BR> 
  112.  
  113. });<BR> 
  114.  
  115. </script><BR> 
  116.  
  117. </P> 

 

 

1. 排序

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

代码:

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

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

效果图:

2. 分页

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

代码:

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

3. 过滤

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

代码:

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

4. 分组

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

代码:

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

 

5. 结束语

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

 

示例下载

 

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

返回web开发教程...