EasyUI+Hibernate实现表格多层属性本地列排序、搜索过滤功能

问题引入：

近期在折腾学习EasyUI的用法，最近碰到一个需求：

一、 对表格数据进行列排序。

官方给出了两种的排序方法：

1. 本地排序，不向后台发送请求直接根据本地数据排序。

方法：在表格设置

remoteSort=”false”，在对应排序列sortable:true

2. 发送请求后台执行再返回排序好的数据

这种http://www.jeasyui.net/tutorial/29.html是发送请求传参到服务器，再根据参数在服务器执行查询返回，然而我一开始想法是想偷懒，既然本地已经实现排序功能，为什么要等服务器执行返回呢？

因此采取第2种方案，经过一段时间的折腾，发现只有部分列可以实现本地排序。

Jsp部分代码如下:

<table id="dg" class="easyui-datagrid" title="订单项管理"
style="width: 100%; height: auto" remoteSort="false"
data-options="
loadMsg: '正在加载，请稍候...',
rownumbers:true,
pagination:true,
pageList: [5, 10, 50],
striped: true,
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: '${ pageContext.request.contextPath }/orderItems_findByPage.action',
method: 'get',
onClickRow: onClickRow">
<thead>
<tr>
<!-- 各列 -->
<!-- 自增主键隐藏 -->
<th data-options="field:'ori_id',align:'center',hidden:'true'">订单项ID</th>
<!-- Todo .....$#%#$% 排序( sortable:true) -->
<th data-options="field:'ord_username',align:'center', width:'12%',
formatter:function(value,row){
value = row.orders.user.user_name;
return value;
}" >订单用户</th>
<th data-options="field:'orders',align:'center', width:'13%',
formatter:function(value,row){
value = row.orders.ord_number;
return value;
}">所属订单号</th>
<th data-options="field:'goods_id',align:'center',width:'4%',sortable:true">商品id</th>

<%-- <th data-options="url: '${ pageContext.request.contextPath }/orders_findById.action',
field:'goods_name',align:'center',width:'30%'">商品名称</th> --%>

<th data-options="field:'goods_num',align:'center',width:'8%',sortable:true">商品项数量</th>
<th data-options="field:'ori_address',align:'center',width:'25%',sortable:true">收货地址</th>
<th data-options="field:'ori_state',align:'center',width:'8%',sortable:true,
formatter:function(value,row){
if(value=='1'){
value='已签收'
}else if(value=='0'){
value='未收货';
}
return value;
}">买家收货状态</th>
<th data-options="field:'ori_passway',align:'center',width:'10%',sortable:true">物流方式</th>
<th data-options="field:'ord_createtime',align:'center', width:'12%',
formatter:function(value,row){
value = row.orders.ord_createtime;
return value;
}">创建时间</th>
</tr>
</thead>
</table>

根据demo实现之后，大部分列可以实现成功排序，然而偏偏

发现那些嵌套的属性无法排序，比如row.orders.ord_number，row.orders.user.user_name;，分析后台数据库一对多联系以及表格数据json格式，

{
"total": 7,
"rows": [
{
"goods_id": 22,
"goods_num": 2,
"orders": {
"ord_createtime": "2017-03-18 14:53:10",
"ord_id": 14,
"ord_note": "截至收货：2017-05-08",
"ord_number": "DFERQJ34234",
"ord_state": "1",
"user": {
"user_address": "
草地",
"user_id": 30,
"user_name": "菊花",
"user_phone": "119",
"user_pwd": "c6f057b86584942e415435ffb1fa93d4",
"user_real_name": "野菊花",
"user_sex": "男"
}
},
"ori_address": "北理珠",
"ori_id": 19,
"ori_passway": "中国邮政",
"ori_state": "1"
}

]
}

解决：

猜测是easyUI表格排序没有实现对列子属性排序的功能，因为ord_number和user_name是一方属性的子属性，甚至user_name是子属性user的子属性，因此必须采用第二种方案，在后台排序之后再返回到前台jsp.

墙内查询半天没有解决，直接google找到解决方案。

这是如何利用Criteria 对象对多层属性进行排序

http://stackoverflow.com/questions/29436261/hibernate-criteria-find-entity-if-any-of-its-childrens-children-have-a-specifi

关键代码如下：

//分页查找
public String findByPage(){
//统计所有数据行数
int allcount = orderItemsService.findAll().size();

DetachedCriteria criteria = DetachedCriteria.forClass(OrderItems.class,"o");
criteria.createAlias("o.orders", "p");
criteria.createAlias("p.user", "u");
//criteria.add(Restrictions.like("u.user_name", "%蜗牛%"));
//按用户排序加时间排序
criteria.addOrder(Order.asc("u.user_name")).addOrder(Order.asc("p.ord_createtime"));

//默认当前页1
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//默认每页显示条数10
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);

//获取当前页数据
List<OrderItems> rows = orderItemsService.findByPage(intPage,number,criteria);

Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
jsonMap.put("total", allcount);
jsonMap.put("rows", rows);
//System.out.println("jsonMap__________\n"+jsonMap);

// 数据转换成json传给前台
String jsonString = FastJsonUtil.toJSONString(jsonMap);
//System.out.println("jsonString__________:\n"+jsonString);
HttpServletResponse response = ServletActionContext.getResponse();
FastJsonUtil.write_json(response, jsonString);
return NONE;
}

下面这几行代码实现了对子对象的别名命名和提取，从而实现默认对用户名的排序，再次基础再对订单创建时间进行排序

DetachedCriteria criteria = DetachedCriteria.forClass(OrderItems.class,"o");
criteria.createAlias("o.orders", "p");
criteria.createAlias("p.user", "u");
//criteria.add(Restrictions.like("u.user_name", "%蜗牛%"));
//按用户排序加时间排序
criteria.addOrder(Order.asc("u.user_name")).addOrder(Order.asc("p.ord_createtime"));

实现效果：

如果想实现其他列排序，则可以调用本地排序，直接点击非包含子属性列，实现排序。

比如根据商品id排序，



二、关键字搜索的实现：

这个需求相对简单点，前台传入关键词，后台直接调用criteria封装的查询过滤

前台jsp搜索框则是学习EasyUI官方案例：

<input id="Search_user" class="easyui-textbox" style="left:20px;width:200px" data-options="
prompt: '请输入用户名',
iconWidth: 15,
icons: [{
iconCls:'icon-search',
handler: function(e){
//Todo..执行搜索
var v = $(e.data.target).textbox('getValue');
if(v){
//alert('你输入：'+v);
Search();
}else{
alert('请输入用户名');
}

}
}]
">

JS代码添加清空图标以及搜索调用post请求，传入参数：

$(function() {
//过滤搜索框
//初次进入清空
$('#Search_user').textbox('clear');
$.extend($.fn.textbox.methods, {
addClearBtn: function(jq, iconCls){
return jq.each(function(){
var t = $(this);
var opts = t.textbox('options');
opts.icons = opts.icons || [];
opts.icons.unshift({
iconCls: iconCls,
handler: function(e){
$(e.data.target).textbox('clear').textbox('textbox').focus();
$(this).css('visibility','hidden');
}
});
t.textbox();
if (!t.textbox('getText')){
t.textbox('getIcon',0).css('visibility','hidden');
}
t.textbox('textbox').bind('keyup', function(){
var icon = t.textbox('getIcon',0);
if ($(this).val()){
icon.css('visibility','visible');
} else {
icon.css('visibility','hidden');
}
});
});
}
});

$(function(){
$('#Search_user').textbox().textbox('addClearBtn', 'icon-clear');
});
});
//Search
function Search(){
var key_word = $('#Search_user').val();
//alert('搜索关键词'+key_word);
var url = '${ pageContext.request.contextPath }/orderItems_findByName.action?key_word='
+key_word;
var param = {};
$.post(url,param,function(data){
//alert('返回'+data);
$('#dg').datagrid('loadData', data);
});
}

后台代码实现：

//用户名查找
public String findByName(){
System.out.println("findByName"+key_word);
DetachedCriteria criteria = DetachedCriteria.forClass(OrderItems.class,"o");
criteria.createAlias("o.orders", "p");
criteria.createAlias("p.user", "u");
criteria.add(Restrictions.like("u.user_name", "%"+key_word+"%"));
//按用户排序加时间排序
criteria.addOrder(Order.asc("u.user_name")).addOrder(Order.asc("p.ord_createtime"));

//默认当前页1
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//默认每页显示条数10
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);

//获取当前页数据
List<OrderItems> rows = orderItemsService.findByPage(intPage,number,criteria);
//统计所有数据行数
int allcount = rows.size();
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
jsonMap.put("total", allcount);
jsonMap.put("rows", rows);
//System.out.println("jsonMap__________\n"+jsonMap);

// 数据转换成json传给前台
String jsonString = FastJsonUtil.toJSONString(jsonMap);
System.out.println("jsonString__________:\n"+jsonString);
HttpServletResponse response = ServletActionContext.getResponse();
FastJsonUtil.write_json(response, jsonString);
return NONE;
}

实现效果：