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

登录

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

<table id="tableDepartmentInformation">
<thead>
<tr>
<th>First Name
</th>
<th>Last Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kevin</td>
<td>Griffin</td>
<td>Marketing</td>
</tr>
<tr>
<td>Rich</td>
<td>Dudley</td>
<td>Marketing</td>
</tr>
<tr>
<td>Chris</td>
<td>Bannon</td>
<td>Development</td>
</tr>
<tr>
<td>Johnny</td>
<td>Doe</td>
<td>Management</td>
</tr>
<tr>
<td>Tommy</td>
<td>Tutone</td>
<td>IT</td>
</tr>
<tr>
<td>Joe</td>
<td>Montana</td>
<td>IT</td>
</tr>
<tr>
<td>Ingio</td>
<td>Montoya</td>
<td>Freelance</td>
</tr>
<tr>
<td>Luke</td>
<td>Skywalker</td>
<td>Jedi</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#tableDepartmentInformation").wijgrid();
});
</script>

复制代码

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 更优美的jQuery UI部件集：C1 Wijmo Grids 更多惊喜

本帖子中包含更多资源

0 个回复

浏览过的版块

活字格认证