博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜
阅读量:6155 次
发布时间:2019-06-21

本文共 2119 字,大约阅读时间需要 7 分钟。

hot3.png

本文中,我将给大家介绍一系列非常棒的 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下载,请进入

本文出自 “” 博客,请务必保留此出处

转载于:https://my.oschina.net/powertoolsteam/blog/278223

你可能感兴趣的文章
Java基础学习总结(4)——对象转型
查看>>
BZOJ3239Discrete Logging——BSGS
查看>>
SpringMVC权限管理
查看>>
spring 整合 redis 配置
查看>>
redhat6.1下chrome的安装
查看>>
cacti分组发飞信模块开发
查看>>
浅析LUA中游戏脚本语言之魔兽世界
查看>>
飞翔的秘密
查看>>
Red Hat 安装源包出错 Package xxx.rpm is not signed
查看>>
编译安装mysql-5.6.16.tar.gz
查看>>
类与成员变量,成员方法的测试
查看>>
活在当下
查看>>
每天进步一点----- MediaPlayer
查看>>
PowerDesigner中CDM和PDM如何定义外键关系
查看>>
跨域-学习笔记
查看>>
the assignment of reading paper
查看>>
android apk 逆向中常用工具一览
查看>>
MyEclipse 报错 Errors running builder 'JavaScript Validator' on project......
查看>>
Skip List——跳表,一个高效的索引技术
查看>>
Yii2单元测试初探
查看>>