本文中,我将给大家介绍一系列非常棒的 Wijmo Grids功能。我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧。
<BR>
<table id="tableDepartmentInformation"><BR>
<thead><BR>
<tr><BR>
<th>First Name<BR>
</th><BR>
<th>Last Name</th><BR>
<th>Department</th><BR>
</tr><BR>
</thead><BR>
<tbody><BR>
<tr><BR>
<td>Kevin</td><BR>
<td>Griffin</td><BR>
<td>Marketing</td><BR>
</tr><BR>
<tr><BR>
<td>Rich</td><BR>
<td>Dudley</td><BR>
<td>Marketing</td><BR>
</tr><BR>
<tr><BR>
<td>Chris</td><BR>
<td>Bannon</td><BR>
<td>Development</td><BR>
</tr><BR>
<tr><BR>
<td>Johnny</td><BR>
<td>Doe</td><BR>
<td>Management</td><BR>
</tr><BR>
<tr><BR>
<td>Tommy</td><BR>
<td>Tutone</td><BR>
<td>IT</td><BR>
</tr><BR>
<tr><BR>
<td>Joe</td><BR>
<td>Montana</td><BR>
<td>IT</td><BR>
</tr><BR>
<tr><BR>
<td>Ingio</td><BR>
<td>Montoya</td><BR>
<td>Freelance</td><BR>
</tr><BR>
<tr><BR>
<td>Luke</td><BR>
<td>Skywalker</td><BR>
<td>Jedi</td><BR>
</tr><BR>
</tbody><BR>
</table><P></P>
<P><script type="text/javascript"><BR>
$(document).ready(function () {<BR>
$("#tableDepartmentInformation").wijgrid();<BR>
});<BR>
</script><BR>
</P>
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更新)!
分享到:
相关推荐
NULL 博文链接:https://hugang357.iteye.com/blog/1564263
Wijmo Base on Jquery UI Widget
Wijmo jQuery 插件集
wijmo-JQuery插件,很强大的UI
Wijmo-Pro(基于jqueryUI提供了40+组件,强大的图标组件)
Wijmo是一个基于jQuery UI的UI部件的套件。Wijmo部件进行了优化客户端Web开发和利用jQuery的优越的性能和易用性的力量。所有的Wijmo部件都配备了20多个主题和支持ThemeRoller。 Wijmo主要特点 1.完全支持HTML5 ...
摘要:脚本资源,jQuery,Wijmo Wijmo是一个基于jQuery UI的组件集,有超过30多个jQuery UI 组件,是一个CSS3,SVG,HTML5的混合物,Wijmo开发了一系列包括图表、、Tab选项卡、滑动门、菜单、上传文件、柱型图、表单...
最领先的Web开发技术使用集 HTML5、jQuery、CSS3、和 SVG 多项技术于一体的 Wijmo 控件包进行开发,可以让您的 Web 应用系统紧跟当前的流行趋势,并能让您的 Web 应用程序拥有更快的执行速度、用户访问也更加流畅...
wijmo 的试用版本,可以使用30天。如果要是有破解的版本会第一时间拿来给大家分享。
Wijmo是一个基于jQuery UI的UI部件的套件,目前还处于beta阶段。Wijmo部件进行了优化客户端Web开发和利用jQuery的优越的性能和易用性的力量。所有的Wijmo部件都配备了20多个主题和支持ThemeRoller。 Wijmo主要特点 1...
Wijmo5 Flexgrid演示代码合集,打包发布 转载自官方网站.
ComponentOne Studio for ASP.NET Wijmo是基于jQuery和Wijmo的新一代Web控件。它提供完整的server端开发技术和非常丰富的富客户端UI能力。可用于多种设备:PC、笔记本、iPad、平板电脑、智能手机和移动终端。
jQueryUI Widgets Why use Studio for ASP.NET Wijmo? One Technology for All ASP.NET Development Take on any project with a single technology that provides everything from pure client-side ...
jQueryUI Widgets Why use Studio for ASP.NET Wijmo? One Technology for All ASP.NET Development Take on any project with a single technology that provides everything from pure client-side ...
jQueryUI Widgets Why use Studio for ASP.NET Wijmo? One Technology for All ASP.NET Development Take on any project with a single technology that provides everything from pure client-side ...
jQueryUI Widgets Why use Studio for ASP.NET Wijmo? One Technology for All ASP.NET Development Take on any project with a single technology that provides everything from pure client-side ...
jQueryUI Widgets Why use Studio for ASP.NET Wijmo? One Technology for All ASP.NET Development Take on any project with a single technology that provides everything from pure client-side ...
文件名称:C1StudioAspWijmo_2012v2.msi 共三个压缩分卷,请全部下载后解压 40+ styled, supercharged, and easy-to-use controls built on Web standards including AJAX, CSS, HTML5, and jQuery.