【struts2+hibernate+spring项目实战】ajax+jquery报表数据显示(ssh)
報表頁數據顯示
本項目中以商品采購信息為例,統(tǒng)計采購指定時間,指定供應商對應的采購報表信息,并以數據加圖片的形式展示。
2.基于頁面結構,設置采購鏈接對應的顯示信息頁面
- 當前僅制作根據商品名進行報表統(tǒng)計,也可以根據采購人員進行報表統(tǒng)計,由于每個報表頁的顯示格式均不相同,此處點擊銷售人員后,應該重新跳轉到全新的頁面,而不是當前頁面更換數據。
- 報表不對應全新的數據,是對其他數據的統(tǒng)計,因此無需設置Model,但是需要設置查詢模型,封裝查詢條件
- 查詢條件在設置時根據頁面結構進行設計,無需設置為模型結構的條件
查詢模型設計如下:
3.設置進入頁面的數據加載
- Action
- Ebo
添加固定查詢條件為采購類訂單。項目中的采購報表與銷售報表從入口鏈接中已經進行了區(qū)分,此處可以制作獨立的方法,如果制作通用方法,則通過表現層傳遞參數完成,業(yè)務層加載參數進行設置,可以進行有效的合并。但是基于業(yè)務層方法名應該展現業(yè)務名稱,可以考慮制作成獨立的方法分門別類進行管理書寫。或者抽象出私有方法進行間接訪問。
- Impl
根據報表所要展示的數據,首先拼寫SQL語句,建議先將語句寫好,然后轉化為QBC查詢。根據頁面展示的內容為商品名稱與對應的數據得知報表最終顯示數據對應訂單明細(子單)數據。
A. 設置查詢投影為商品信息與統(tǒng)計信息
B. 顯示的內容為相同的商品累加在一起,需要對商品進行分組,添加分組條件
C. 根據查詢條件,完成查詢內容的設計
- 對上述查詢內容實現QBC查詢設置
- 投影設置
- 查詢條件設置
4.將數據返回到頁面進行展示,重啟服務器,測試結果
- 頁面使用迭代數組的格式進行
5.為任意數據添加明細數據查看功能
詳情設置可以使用各種各樣的格式,例如彈出DIV,刷新該頁面等等。此處為加強jquery對象的操作能力,設置為當前頁面數據下方添加顯示內容。
6.為詳情鏈接綁定事件
7.添加ajax請求獲取數據
- 獲取數據需求分析:
此處點擊后展示指定商品所有的明細數據,條件為頁面輸入條件。供應商數據已經沒有使用意義,畢竟商品具體化后,供應商是不可能發(fā)生概念的。 - 設置ajax查詢對應的json格式參數
8.設置ajax提交請求
$.post("bill_ajaxGetBillByGoods.action",jsonParam,function(data){9.后臺根據查詢條件獲取對應的訂單明細全數據
- Action
- Ebo
- Impl
數據層中設置訂單類別為固定查詢條件,貨物為固定查詢條件
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數據拼成指定格式,進行顯示
拼裝顯示表頭,該格式可從靜態(tài)頁面中點擊后生成的數據中直接獲取,靜態(tài)頁面并不直接顯示該數據。
- 拼裝顯示數據
- 拼裝顯示表尾統(tǒng)計信息
11.當前顯示的明細信息數據量過于大,顯示其中一個后,其他的顯示空間基本上沒有了
為所有的動態(tài)生成行對象添加class,當顯示某一個明細信息時,將其他動態(tài)生成的行對象刪除
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",用于后期操作刪除標記//動態(tài)添加一個tr行,用于做標題欄//創(chuàng)建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+" 元</td>");$tr.append($td4);var $td5 = $("<td align='right'>"+billGoods.num*billGoods.price+" 元</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)+" 元</td>");$trFoot.append($td2);$tt.after($trFoot);$tt=$trHead;});});function intToFloat(val){return new Number(val).toFixed(2);}});總結
以上是生活随笔為你收集整理的【struts2+hibernate+spring项目实战】ajax+jquery报表数据显示(ssh)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【struts2+hibernate+s
- 下一篇: 【struts2+hibernate+s