報表頁數據顯示

本項目中以商品采購信息為例，統計采購指定時間，指定供應商對應的采購報表信息，并以數據加圖片的形式展示。

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)fromtbl_orderdetail od,tbl_goods gwhereg.uuid = od.goodsUuidgroup byod.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 gmdc.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);}});

總結

以上是生活随笔為你收集整理的【struts2+hibernate+spring项目实战】ajax+jquery报表数据显示（ssh）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。