SSH整合之使用spring-DWR实现动态综合查询数据

接上一篇实现分页功能后来讲

现已查询账单为例

前端页面有代码:

<%--账单管理开始--%>
        <div id="bill_Div" style="display: block;">
            <%--组合查询开始--%>
            <div class="menu">
                <form method="post">
                    商品名称：<input type="text" name="productName" id="productName" class="myinput"/>    
                    是否付款：<select name="payStatus" id="payStatus" class="myinput">
                    <option value="2" selected>全部</option>
                    <option value="1">已付款</option>
                    <option value="0">未付款</option>
                </select>    
                    <input type="button" οnclick="" value="组合查询" class="button"/>
                </form>
            </div>
            <%--组合查询结束--%>

            <%--账单管理主体开始--%>
            <div id="bill_manager_main">
                <div id="title_bill" style="height: 50px;">
                    <div style="margin-top: 5px;padding-top:10px;margin-left:10px">
                        <font style="font-size: 25px;float: left;">账单管理 >></font>
                    </div>
                    <div style="float: right;margin-top:8px;margin-right: 10px;">
                        <input type="button" value="添加账单" class="input-button"
                               οnclick="show_Bill_add();"/>
                    </div>
                    <div style="clear: both;"></div>
                </div>

                <hr/>

                <div id="bill_Table" style="width: 100%;text-align: center;">
                    <div class="content">
                        <div style="padding: 10px;">
                            <table class="list">
                                <thead>
                                <tr>
                                    <td>账单编号</td>
                                    <td>商品名称</td>
                                    <td>商品数量</td>
                                    <td>交易金额</td>
                                    <td>是否付款</td>
                                    <td>供应商名称</td>
                                    <td>商品描述</td>
                                    <td>账单时间</td>
                                </tr>
                                </thead>
                                <tbody id="oxalis_info">
                                </tbody>
                                <tr>
                                    <td id="oxalis_page_content" colspan="8" style="text-align: right"><page:OxalisPage size="20"/></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <%--账单管理主体结束--%>
        </div>
<%--账单管理结束--%>

我们首先理一下思路,若需要实现动态查询账单信息,需要传将账单名和付款状态传到后端处理

在持久层的操作中,账单名是使用模糊查询,而付款状态是使用精确查询

且查询出来的结果,也需要进行分页

根据前面那篇博客所说,若需要分页,就至少要有两个方法,查询数据数量以及获取数据库数据

所以我们首先来到Hibernate的持久层来进行操作

添加两个方法至账单操作接口类:

    public Long getQueryOlsCount(String olsName,Integer olsIsPay);

    public List<Oxalis>  getQueryOlsTagPage(String olsName,Integer olsIsPay,Integer start,Integer max);

在账单服务实现(持久层操作)类实现他们:

     /**
     * 获取查询后的账单数量
     *
     * @param olsName  账单名称
     * @param olsIsPay 账单付款情况
     * @return 查询后账单数量
     */
    @Override
    public Long getQueryOlsCount(String olsName, Integer olsIsPay) {
        Session session = getSession();
        Byte olsisPayByte = olsIsPay.byteValue();
        SQLQuery query;
        if(olsIsPay == 2){
            query = session.createSQLQuery("SELECT COUNT(*) from Oxalis WHERE olsWarename LIKE :olsname");
        }else{
            query = session.createSQLQuery("SELECT COUNT(*) from Oxalis WHERE olsWarename LIKE :olsname and olsPayment = :olsIsPay ");
            query.setByte("olsIsPay", olsisPayByte);
        }
        query.setString("olsname", "%" + olsName + "%");
        Long count = Long.parseLong(query.uniqueResult().toString());
        return count;
    }

    /**
     * 查询后的账单分页对象
     *
     * @param olsName  账单名称
     * @param olsIsPay 账单是否已付款
     * @param start    开始位置
     * @param max      加载数量
     * @return 账单分页对象
     */
    @Override
    public List<Oxalis> getQueryOlsTagPage(String olsName, Integer olsIsPay, Integer start, Integer max) {
        Session session = getSession();
        Byte olsisPayByte = olsIsPay.byteValue();
        Query query;
        if(olsIsPay == 2){
            query = session.createQuery("FROM Oxalis o where o.olsWarename like :olsname");
        }else {
            query = session.createQuery("FROM Oxalis o where o.olsWarename like :olsname and o.olsPayment = :olsispay");
            query.setByte("olsispay", olsisPayByte);
        }
        query.setString("olsname", "%" + olsName + "%");
        query.setFirstResult(start);
        query.setMaxResults(max);
        List<Oxalis> list = query.list();
        return list;
    }

在此处不难看出,在这两个方法中,我将传进来的olsIsPay进行了判断,若值为2,则是付款状态未知,若为0或1,则为已知

都使用了预编译的方式来进行操作,查询数据数量使用的是sqlquery,而查询数据是使用的query

注意:此处使用预编译时,在sql语句或hql语句中 :后面需要紧跟通配符,若有其他字符,在下方匹配时,也需要将此字符加入(包括空格),要不就会报错

两个方法编写完毕,我们来到dwr的服务支持类中

同样编写两个方法

一个方法为加载查询的数据

/**
     * 查询账单分页方法
     *
     * @param olsName  账单名
     * @param olsIsPay 账单付款情况
     * @param size     分页大小
     * @return List(账单数据集合, 开始位置集合, 加载数量集合)
     */
    public List<Oxalis> getOxalisQueryPage(String olsName, Integer olsIsPay, Integer size) {
        List all = new ArrayList();
        Page page = new Page();
        List<OxalisTransfer> list = new ArrayList<OxalisTransfer>();
        Long queryCount = os.getQueryOlsCount(olsName, olsIsPay);
        page.setSIZE(size);
        page.setColunmCount(queryCount.intValue());
        List<Oxalis> oxalislist = os.getQueryOlsTagPage(olsName, olsIsPay, 0, size);
        for (int i = 0; i < oxalislist.size(); i++) {
            //调用DTO进行转换.
            OxalisTransfer transfer = new OxalisTransfer(oxalislist.get(i));
            list.add(transfer);
        }
        Iterator<int[]> it = page.getPages().iterator();
        List start = new ArrayList();
        List max = new ArrayList();
        while (it.hasNext()) {
            int[] temp = it.next();
            start.add(temp[0]);
            max.add(temp[1]);
        }
        ;
        all.add(list);
        all.add(start);
        all.add(max);
        return all;
    }

在此处我们将账单名称.付款状态以及每页加载多少条数据的值传进来,

new出了一个ArrayList集合和Page对象 (上篇博文有配置)

同时也New出了一个queryCount的长整型Long,他的值为查询的结果数量

后面我们将传进来的size和queryCount全部set到page中去,

同时将查询出来的账单对象用一个list集合保存起来,

接下来我们使用迭代器将page对象中的pages()循环输出

在循环外定义开始位置和加载数量的集合

在循环内复制给他们

然后将账单对象集合、开始位置集合、加载数量集合全部添加进入all这个集合中

然后将all return给前台.

     /**
     * 查询后dwr分页按钮翻页方法
     *
     * @param olsName  账单名
     * @param olsIsPay 账单付款清理
     * @param start    开始位置
     * @param max      加载数量
     * @return 账单对象集合
     */
    public List<OxalisTransfer> getOxalisQueryPage_etc(String olsName, Integer olsIsPay, Integer start, Integer max) {
        List<OxalisTransfer> list = new ArrayList<OxalisTransfer>();
        List<Oxalis> oxalislist = os.getQueryOlsTagPage(olsName, olsIsPay, start, max);
        for (int i = 0; i < oxalislist.size(); i++) {
            //调用DTO进行转换.
            OxalisTransfer transfer = new OxalisTransfer(oxalislist.get(i));
            list.add(transfer);
        }
        return list;
    }

这个方法同样写在dwr的支持类中

new出一个集合,调用账单持久层操作类中的获取查询后账单信息的方法赋值

然后同样return给前台.

最后将这两个方法添加进入spring的所对应的账单bean中的dwr支持组件内去

        <!--允许执行的方法-->
            <dwr:include method="getUsers"/>
            <dwr:include method="QueryUserById"/>
            <dwr:include method="QueryUserPages"/>
            <dwr:include method="getQueryUsers" />
            <dwr:include method="getQueryUsers_etc" />
        </dwr:remote>

后端部分我们已经完成,下面我们进入前端编写

来到我们之前编写的js文件内

首先定义一个查询的方法

//供应商综合查询
function olsQueryLoader(val){
    var olsName = $("#productName").val();
    var olsIsPay = $("#payStatus").val();
    OxalisService.getOxalisQueryPage(olsName,parseInt(olsIsPay),val,oxalisContextQuery);
}

调用之前配置的dwr,将前端页面的值传至后端处理,并同时再定义一个回调函数

//加载查询分页按钮和传值
function oxalisContextQuery(data_all) {
    //获取容器
    var pages_content = document.getElementById("oxalis_page_content");
    //取出记录
    var data = data_all[0];
    //取出分页集合
    var data_page_start = data_all[1];
    var data_page_end = data_all[2];
    //显示数据
    loadOxalisContent(data);
    //清空原有信息
    pages_content.innerHTML = "";
    //加载分页信息
    var index = 0;
    for (var temp in data_page_start) {
        var start_P = data_page_start[temp];
        var end_P = data_page_end[index];
        var tag_a = document.createElement("a");
        tag_a.setAttribute("href", "javascript:oxalisQueryPageLoad(" + start_P + "," + end_P + ")");
        tag_a.innerHTML = "第" + (parseInt(temp) + 1) + "页";
        pages_content.appendChild(tag_a);
        pages_content.append("    ");
        index++;
    }
}

在回调函数内我们将返回值全部取出,将分页按钮加载到页面中去,并同时在超链接内部,定义一个dwr动态分页的方法

//加载查询结果
function oxalisQueryPageLoad(i, j) {
    //获取数据
    var olsName = $("#productName").val();
    var olsIsPay = $("#payStatus").val();
    OxalisService.getOxalisQueryPage_etc(olsName, parseInt(olsIsPay), i, j, loadOxalisContent);
}

同样的,将前端的值,通过dwr传至后端,调用之前定义的获取数据的方法,将回调函数交给之前写的加载账单数据的方法进行处理,传往前端页面

最后,我们在前端页面将olsQueryLoade(加载几条数据)加入到提交(button)按钮的onclick属性中,即可成功调用该方法

到此,该功能实现.