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

发布时间:2012/11/16 00:11 发布者:葡萄城产品团队

返回博客中心

本文中,我将给大家介绍一系列非常棒的 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>
复制代码

ing属性为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 分组功能我们需要设置 allowColMovingshowGroupArea属性。之后,我们就可以拖拽列头到分组区域进行分组了。
代码:

 
$("#tableDepartmentInformation").wijgrid(
{
showGroupArea: true
});
$("#tableDepartmentInformation").wijgrid(
{
allowColMoving: true
});
复制代码





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

示例下载

8413652371124.zip (3.15 M, 下载次数:235)

关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网