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;
    }

实现效果：