首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery EasyUI 的datagrid 调整Struts2的实现二 (分页,排序,查询)

2012-11-19 
JQuery EasyUI 的datagrid 整合Struts2的实现二 (分页,排序,查询)上一篇: JQuery EasyUI 的datagrid 整合S

JQuery EasyUI 的datagrid 整合Struts2的实现二 (分页,排序,查询)

上一篇: JQuery EasyUI 的datagrid 整合Struts2的实现一 (基本实现)

?

?

??? 上一篇中,时间有限,只是介绍一下基础实现。我想,大部分人会觉得那很简单。对于这样一个应用中,个人觉得一个难点,也是由于官方API中并未说明确的一点,是如何建立查询和排序。

??? 这里从 分页,查询,排序进行简单的介绍下:

?

?

1.分页。

?

JQuery EasyUI 的datagrid 中,从API中看,从服务端可以获取两个基本参数:page和rows。page:是当前页码。rows:是每页大小,相当于pageSize。因此通过struts2实现分页不难,直接再action中定义两个参数:

private int page;

private int rows ;

?

这样就可以获取当前页和每页总数。从而实现分页功能。

?

2.查询和排序。

???? 起初我用easyUI做项目时,最搞不懂得是,如何进行排序和插叙。莫非要更改easyui源码?还是在url上面添加参数?,或者通过更改URL的方式进行更新数据?,我想了很多很多。可是终究都没有去做。

???? 说来也好玩,我得益于一次午觉,在午觉中,我在梦中突然想起怎么去实现这个功能。等我醒来时,趁着还有点记忆就可以做了,结果成功了。这点我自己都很惊异。

???? API中提供了一个参数 queryParams:{},我的想法是扩展这个参数对象。我现在需要排序和查询,因此我将这个对象默认为{"sortName":"","sortOrder":"","queryWord":"","queryType":""}

sortName:排序字段,

sortOrder:排序方式:asc|desc

queryWord:查询关键字

queryType:查询字段。

?

这个queryParams在表个刷新时会自动附带传到服务端。因此服务端需要接收。

在action中定义几个接受参数

private String sortName;

private String sortOrder;

private String queryWord;

private String queryType;

以上是需要注意的,我一开始还以为用queryParams来获取参数呢,结果证明不是那样的。

?

?

?

下面介绍js中实现查询的方式:

??? 首先,定义一个插叙窗口,会有两个传入参数:queryWord,queryType

function query(queryWord,queryType){var queryParams = $('#test').datagrid('options').queryParams;//更改queryParams对象中两属性。queryParams.queryWord = queryWord;queryParams.queryType = queryType;$('#test').datagrid('reload');}

?

?这样做,你会发现,查询的同时也包含了分页。即,不用你再去考虑分页的问题。

?

排序:这里的datagrid排序对针对服务端传入数据进行排序的,是整个的排序,而不是已经取出数据的排序。

我需要写个排序函数

function sort(sortName,sortOrder){    var queryParams = $('#test').datagrid('options').queryParams;    queryparams.sortName = sortName;    queryaParams.sortOrder = sortOrder;     $("#test").datagrid('reload');    }

?

?方法有了,可是怎么调用呢。需要再查API文档,发现一个EVENT:onSortColumn(sort,order)

这里把这个事件加入到datagrid的初始化中

?

onsortColumn:function(sort,order){

??? sort(sort,order);//调用排序方法。

}

?

这样基本上就ok了。

?

action中只需要在DAO层将提取数据的方法多加排序和查询的参数,就可以了。

?

?

优点:这里通过简单的操作,使得查询和排序都是在同一页面中,调用同一action的。而且无论是查询还是排序结果都可以进行分页。而且可以进行对排序的结果进行查询,也可以对查询的结果进行排序。

?

1 楼 qingtianxl 2010-08-06   怎么再后台去排序的类型 和排序的字段 2 楼 qingtianxl 2010-08-06   说的太不明白了 3 楼 283433775 2010-08-12   通过大家的反映,等抽空,我写个详细的。再发出来。 4 楼 sundy00lee 2010-09-10   这个控件怎么实现服务端数据的插入,更新和删除,麻烦博主介绍下,谢谢 5 楼 andylauxing 2011-12-06   希望楼主做一个主从表(主子表结构)的增删改查的demo供新手学习,thks. 6 楼 yujun2 2012-10-12   action后台怎么使用那些个参数对象,方法要查询的是什么,是一个list封装的数据么,比如通过后天的那些个参数查询出一个student的list对象?我就是想知道后天方法该怎么做?求代码啊,谢谢

热点排行