ssh项目实战----ajax+jquery报表数据显示

报表页数据显示

本项目中以商品采购信息为例，统计采购指定时间，指定供应商对应的采购报表信息，并以数据加图片的形式展示。

2.基于页面结构，设置采购链接对应的显示信息页面

• 当前仅制作根据商品名进行报表统计，也可以根据采购人员进行报表统计，由于每个报表页的显示格式均不相同，此处点击销售人员后，应该重新跳转到全新的页面，而不是当前页面更换数据。
• 报表不对应全新的数据，是对其他数据的统计，因此无需设置Model，但是需要设置查询模型，封装查询条件
• 查询条件在设置时根据页面结构进行设计，无需设置为模型结构的条件
  查询模型设计如下：

package org.sihai.qualitycontrol.invoice.bill.vo;
import org.sihai.qualitycontrol.util.base.BaseQueryModel;
public class BillQueryModel implements BaseQueryModel{
// TODO 添加自定义查询条件
private Integer type;
private Long supplierUuid;
private Long start;
private Long end;
private Long goodsUuid;
private Integer orderType;
public Integer getOrderType() {
return orderType;
    }
public void setOrderType(Integer orderType) {
this.orderType = orderType;
    }
public Integer getType() {
return type;
    }
public void setType(Integer type) {
this.type = type;
    }
public Long getSupplierUuid() {
return supplierUuid;
    }
public void setSupplierUuid(Long supplierUuid) {
this.supplierUuid = supplierUuid;
    }
public Long getStart() {
return start;
    }
public void setStart(Long start) {
this.start = start;
    }
public Long getEnd() {
return end;
    }
public void setEnd(Long end) {
this.end = end;
    }
public Long getGoodsUuid() {
return goodsUuid;
    }
public void setGoodsUuid(Long goodsUuid) {
this.goodsUuid = goodsUuid;
    }
}
复制代码

3.设置进入页面的数据加载

• Action

public String buyBillList(){
//查询所有的供应商
List<SupplierModel> supplierList = supplierEbi.getAll();
        put("supplierList", supplierList);
//加载符合条件的报表信息
List<Object[]> billList = billEbi.getAllByBill(bqm);
        put("billList", billList);
return "buyBillList";
    }
复制代码

• Ebo
  添加固定查询条件为采购类订单。项目中的采购报表与销售报表从入口链接中已经进行了区分，此处可以制作独立的方法，如果制作通用方法，则通过表现层传递参数完成，业务层加载参数进行设置，可以进行有效的合并。但是基于业务层方法名应该展现业务名称，可以考虑制作成独立的方法分门别类进行管理书写。或者抽象出私有方法进行间接访问。

public List<OrderDetailModel> getBillByGoods(BillQueryModel bqm) {
        bqm.setOrderType(OrdersModel.ORDER_ORDERTYPE_OF_BUY);
return billDao.getBillByGoods(bqm);
    }
复制代码

• Impl
  根据报表所要展示的数据，首先拼写SQL语句，建议先将语句写好，然后转化为QBC查询。根据页面展示的内容为商品名称与对应的数据得知报表最终显示数据对应订单明细（子单）数据。
  A. 设置查询投影为商品信息与统计信息
  B. 显示的内容为相同的商品累加在一起，需要对商品进行分组，添加分组条件
  C. 根据查询条件，完成查询内容的设计

/*
        select 
            od.goodsUuid, 
            g.name, 
            sum(od.num)
        from
            tbl_orderdetail od,
            tbl_goods g
        where
            g.uuid = od.goodsUuid
        group by
            od.goodsUuid
        */
        hql：select gm,sum(num) from OrderDetailModel group by gm.uuid 
复制代码

• 对上述查询内容实现QBC查询设置
• 投影设置
• 查询条件设置

public List<Object[]> getAllByBill(BillQueryModel bqm) {
        DetachedCriteria dc = DetachedCriteria.forClass(OrderDetailModel.class);
//设置一条查询的查询结果内容为多个内容
        ProjectionList plist = Projections.projectionList();
//分组(HQL,SQL中使用分组采用group by来完成，QBC中分组是使用投影完成的)
        plist.add(Projections.groupProperty("gm"));
//select的内容
        plist.add(Projections.sum("num"));
// select gm,sum(num)    from ......    group by gm
        dc.setProjection(plist);
//条件
        dc.createAlias("om", "o");
if(bqm.getType() != null && bqm.getType() != -1){
            dc.add(Restrictions.eq("o.type", bqm.getType()));
        }
if(bqm.getSupplierUuid() != null && bqm.getSupplierUuid() != -1){
            dc.createAlias("o.sm", "s");
            dc.add(Restrictions.eq("s.uuid", bqm.getSupplierUuid()));
        }
return this.getHibernateTemplate().findByCriteria(dc);
    }
复制代码

4.将数据返回到页面进行展示，重启服务器，测试结果

• 页面使用迭代数组的格式进行

<s:iterator value="billList" var="objs">
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2" width="30%" height="30">${objs[0].name}</td>
<td colspan="2">${objs[1]}</td>
<td>
<a href="javascript:void(0)" class="xiu info" value="1">
                                    详情
</a>
</td>
</tr>
</s:iterator>
复制代码

5.为任意数据添加明细数据查看功能

详情设置可以使用各种各样的格式，例如弹出DIV，刷新该页面等等。此处为加强jquery对象的操作能力，设置为当前页面数据下方添加显示内容。

6.为详情链接绑定事件
7.添加ajax请求获取数据

• 获取数据需求分析：
  此处点击后展示指定商品所有的明细数据，条件为页面输入条件。供应商数据已经没有使用意义，毕竟商品具体化后，供应商是不可能发生概念的。
• 设置ajax查询对应的json格式参数

$(".info").click(function(){
        var jsonParam = {"bqm.goodsUuid":$(this).attr("value")};
//jsonParam["bqm.time"]= $("[name='bqm.time']").val();
//jsonParam["bqm.time2"]= $("[name='bqm.time2']").val();
        jsonParam["bqm.type"]= $("[name='bqm.type']").val();
复制代码

8.设置ajax提交请求

$.post("bill_ajaxGetBillByGoods.action",jsonParam,function(data){
复制代码

9.后台根据查询条件获取对应的订单明细全数据

• Action

//根据商品获取报表明细
public String ajaxGetBillByGoods(){
        billGoodsList = billEbi.getBillByGoods(bqm);
return "ajaxGetBillByGoods";
    }
复制代码

• Ebo

public List<OrderDetailModel> getBillByGoods(BillQueryModel bqm) {
        bqm.setOrderType(OrdersModel.ORDER_ORDERTYPE_OF_BUY);
return billDao.getBillByGoods(bqm);
    }
复制代码

• Impl
  数据层中设置订单类别为固定查询条件，货物为固定查询条件

public List<OrderDetailModel> getBillByGoods(BillQueryModel bqm) {
//goodsUuid，type，
        DetachedCriteria dc = DetachedCriteria.forClass(OrderDetailModel.class);
        dc.createAlias("om", "o");
//设置订单类型为进货
        dc.add(Restrictions.eq("o.orderType", bqm.getOrderType()));
//设置动态条件
if(bqm.getGoodsUuid() != null && bqm.getGoodsUuid() != -1){
            dc.createAlias("gm", "g");
            dc.add(Restrictions.eq("g.uuid", bqm.getGoodsUuid()));
        }
if(bqm.getType() != null && bqm.getType() != -1){
            dc.add(Restrictions.eq("o.type", bqm.getType()));
        }
return this.getHibernateTemplate().findByCriteria(dc);
    }
复制代码

strut.xml设置ajax映射数据模型，所需数据一定是页面展示数据或页面展示计算相关的数据，例如价格数据，用于计算总价格，而不直接显示

<!-- Bill -->
<action name="bill_*" class="billAction" method="{1}">
<result name="buyBillList">/WEB-INF/jsps/bill/buyBillList.jsp</result>
<!-- ajax -->
<result name="ajaxGetBillByGoods" type="json">
<param name="root">action</param>
<param name="includeProperties">
                    billGoodsList\[\d+\]\.om\.orderNum,
                    billGoodsList\[\d+\]\.om\.createTimeView,
                    billGoodsList\[\d+\]\.num,
                    billGoodsList\[\d+\]\.price
</param>
</result>
</action> 
复制代码

10.将ajax获取json数据拼成指定格式，进行显示
拼装显示表头，该格式可从静态页面中点击后生成的数据中直接获取，静态页面并不直接显示该数据。

• 拼装显示数据
• 拼装显示表尾统计信息

11.当前显示的明细信息数据量过于大，显示其中一个后，其他的显示空间基本上没有了

为所有的动态生成行对象添加class，当显示某一个明细信息时，将其他动态生成的行对象删除

12.最后设置查看的信息点击后隐藏，与用户进行友好的UI交互

<script type="text/javascript">
    $(function() {
        $("#query").click(function() {
            $("form:first").submit();
        });
        $(".ajaxMsg").live("click",function(){
            $(".ajaxMsg").empty();
        });
        $(".info").click(function(){
var jsonParam = {"bqm.goodsUuid":$(this).attr("value")};
//jsonParam["bqm.time"]= $("[name='bqm.time']").val();
//jsonParam["bqm.time2"]= $("[name='bqm.time2']").val();
            jsonParam["bqm.type"]= $("[name='bqm.type']").val();
var $tt = $(this).parent().parent();
//将制定标记tr删除
                $('.ajaxMsg').empty();
//每个tr对象都带有一个class="ajaxMsg",用于后期操作删除标记
//动态添加一个tr行,用于做标题栏
//创建tr组件
var $trHead = $("<tr align='center' class='ajaxMsg' style='background:url(images/table_bg.gif) repeat-x;'></tr>");
var $td1 = $("<td height='30'>订单号</td>");
                $trHead.append($td1);
var $td2 = $("<td>订单时间</td>");
                $trHead.append($td2);
var $td3 = $("<td>数量</td>");
                $trHead.append($td3);
var $td4 = $("<td>单价</td>");
                $trHead.append($td4);
var $td5 = $("<td>合计</td>");
                $trHead.append($td5);
                $tt.after($trHead);
                $tt=$trHead;
//--------------------------------------------------------------------------
                $.post("bill_ajaxGetBillByGoods.action",jsonParam,function(data){
//billGoodsList[num,om,price]
var sum = 0;
var billGoodsList = data.billGoodsList;
for(var i = 0;i<billGoodsList.length;i++){
var billGoods = billGoodsList[i];
for(var j = 0; j<billGoods.length; j++){
var om = billGoods[j];
                            alert(billGoods.num);
var $tr = $("<tr align='center' class='ajaxMsg'></tr>");
//共计5列
var $td1 = $("<td height='30'>"+om.orderNum+"</td>");
                            $tr.append($td1);
var $td2 = $("<td>"+om.createTimeView+"</td>");
                            $tr.append($td2);
var $td3 = $("<td>"+billGoods.num+"</td>");
                            $tr.append($td3);
var $td4 = $("<td align='right'>"+billGoods.price+"&nbsp;元</td>");
                            $tr.append($td4);
var $td5 = $("<td align='right'>"+billGoods.num*billGoods.price+"&nbsp;元</td>");
                            $tr.append($td5);
                            $tt.after($tr);
                            $tt=$tr;
                        }
                        sum = sum + billGoods.num*billGoods.price;
                    }
//--------------------------------------------------------------------------
var $trFoot = $("<tr align='center' class='ajaxMsg'></tr>");
var $td1 = $("<td align='right' colspan='4' height='30'>总计：</td>");
                    $trFoot.append($td1);
var $td2 = $("<td align='right'>"+intToFloat(sum)+"&nbsp;元</td>");
                    $trFoot.append($td2);
                    $tt.after($trFoot);
                    $tt=$trHead;
                });
        });
function intToFloat(val){
return new Number(val).toFixed(2);
        }
    });
复制代码

如果想获取更多源码或者视频教程，欢迎关注我的微信公众号 好好学java，在公众号里，回复：java基础、html5、javaEE基础、struts2、spring、redis、luncene、oracle等，将可获得以上的优质视频教程及源码。