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

怼烎@ 2022-06-16 07:46 65阅读 0赞

##### 问题引入： #####

近期在折腾学习EasyUI的用法，最近碰到一个需求：  
一、 **对表格数据进行列排序**。  
官方给出了两种的排序方法：  
1. **本地排序，不向后台发送请求直接根据本地数据排序。**  
方法：在表格设置  
**remoteSort=”false”**，在对应排序列**sortable:true**  
2. **发送请求后台执行再返回排序好的数据**  
这种[http://www.jeasyui.net/tutorial/29.html][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>  <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][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"));

#### 实现效果： ####

![这里写图片描述][SouthEast]  
如果想实现其他列排序，则可以调用本地排序，直接点击非包含子属性列，实现排序。  
比如根据商品id排序，  
![这里写图片描述][SouthEast 1]

--------------------

**二、关键字搜索的实现：**  
这个需求相对简单点，前台传入关键词，后台直接调用criteria封装的查询过滤  
前台jsp搜索框则是学习EasyUI官方案例：

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

实现效果：  
![这里写图片描述][SouthEast 2]

[http_www.jeasyui.net_tutorial_29.html]: http://www.jeasyui.net/tutorial/29.html
[http_stackoverflow.com_questions_29436261_hibernate-criteria-find-entity-if-any-of-its-childrens-children-have-a-specifi]: http://stackoverflow.com/questions/29436261/hibernate-criteria-find-entity-if-any-of-its-childrens-children-have-a-specifi
[SouthEast]: /images/20220616/554415ecbe0c440ea54d98f20de38d16.png
[SouthEast 1]: /images/20220616/13e30bd86a8b4031a4457cf9ae39e745.png
[SouthEast 2]: /images/20220616/a378fac108e143b8bff3791aa554d75e.png