Jquery EaysUI 的datagrid实现查询分页
1.分页。
Query EasyUI 的datagrid 中,从API中看,从服务端可以获取两个基本参数:page和rows。page:是当前页码。rows:是每页大小,相当于pageSize。因此通过struts2实现分页不难,直接再action中定义两个参数:
1 |
private int page; |
2 |
3 |
private int rows ; |
这样就可以获取当前页和每页总数。从而实现分页功能。
2.查询和排序。
起初我用easyUI做项目时,最搞不懂得是,如何进行排序和插叙。莫非要更改easyui源码?还是在url上面添加参数?,或者通过更改URL的方式进行更新数据?,我想了很多很多。可是终究都没有去做。
说来也好玩,我得益于一次午觉,在午觉中,我在梦中突然想起怎么去实现这个功能。等我醒来时,趁着还有点记忆就可以做了,结果成功了。这点我自己都很惊异。
API中提供了一个参数 queryParams:{},我的想法是扩展这个参数对象。我现在需要排序和查询,因此我将这个对象默认为{"sortName":"","sortOrder":"","queryWord":"","queryType":""}
sortName:排序字段,
sortOrder:排序方式:asc|desc
queryWord:查询关键字
queryType:查询字段。
这个queryParams在表个刷新时会自动附带传到服务端。因此服务端需要接收。
在action中定义几个接受参数
1 |
private String sortName; |
2 |
3 |
private String sortOrder; |
4 |
5 |
private String queryWord; |
6 |
7 |
private String queryType; |
以上是需要注意的,我一开始还以为用queryParams来获取参数呢,结果证明不是那样的。
下面介绍js中实现查询的方式:
首先,定义一个插叙窗口,会有两个传入参数:queryWord,queryType
Java代码
01 |
function query(queryWord,queryType){ |
02 |
03 |
var queryParams = $( '#test' ).datagrid( 'options' ).queryParams; |
04 |
//更改queryParams对象中两属性。 |
05 |
queryParams.queryWord = queryWord; |
06 |
queryParams.queryType = queryType; |
07 |
08 |
$( '#test' ).datagrid( 'reload' ); |
09 |
10 |
} |
这样做,你会发现,查询的同时也包含了分页。即,不用你再去考虑分页的问题。
排序:这里的datagrid排序对针对服务端传入数据进行排序的,是整个的排序,而不是已经取出数据的排序。
我需要写个排序函数
Java代码:
1 |
function sort(sortName,sortOrder){ |
2 |
3 |
var queryParams = $( '#test' ).datagrid( 'options' ).queryParams; |
4 |
queryparams.sortName = sortName; |
5 |
queryaParams.sortOrder = sortOrder; |
6 |
|
7 |
$( "#test" ).datagrid( 'reload' ); |
8 |
|
9 |
} |
方法有了,可是怎么调用呢。需要再查API文档,发现一个EVENT:onSortColumn(sort,order)
这里把这个事件加入到datagrid的初始化中
1 |
onsortColumn:function(sort,order){ |
2 |
3 |
sort(sort,order); //调用排序方法。 |
4 |
5 |
} |
这样基本上就ok了。
action中只需要在DAO层将提取数据的方法多加排序和查询的参数,就可以了。
优点:这里通过简单的操作,使得查询和排序都是在同一页面中,调用同一action的。而且无论是查询还是排序结果都可以进行分页。而且可以进行对排序的结果进行查询,也可以对查询的结果进行排序。