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的。而且无论是查询还是排序结果都可以进行分页。而且可以进行对排序的结果进行查询，也可以对查询的结果进行排序。