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

报表页数据显示

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

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

当前仅制作根据商品名进行报表统计，也可以根据采购人员进行报表统计，由于每个报表页的显示格式均不相同，此处点击销售人员后，应该重新跳转到全新的页面，而不是当前页面更换数据。

报表不对应全新的数据，是对其他数据的统计，因此无需设置Model，但是需要设置查询模型，封装查询条件

查询条件在设置时根据页面结构进行设计，无需设置为模型结构的条件

查询模型设计如下：

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

Action

Ebo

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

Impl

根据报表所要展示的数据，首先拼写SQL语句，建议先将语句写好，然后转化为QBC查询。根据页面展示的内容为商品名称与对应的数据得知报表最终显示数据对应订单明细（子单）数据。

A. 设置查询投影为商品信息与统计信息

B. 显示的内容为相同的商品累加在一起，需要对商品进行分组，添加分组条件

C. 根据查询条件，完成查询内容的设计

对上述查询内容实现QBC查询设置

投影设置

查询条件设置

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

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

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

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

6.为详情链接绑定事件

7.添加ajax请求获取数据

获取数据需求分析：

此处点击后展示指定商品所有的明细数据，条件为页面输入条件。供应商数据已经没有使用意义，毕竟商品具体化后，供应商是不可能发生概念的。

设置ajax查询对应的json格式参数

8.设置ajax提交请求

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

Action

Ebo

Impl

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

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

10.将ajax获取json数据拼成指定格式，进行显示

拼装显示表头，该格式可从静态页面中点击后生成的数据中直接获取，静态页面并不直接显示该数据。

拼装显示数据

拼装显示表尾统计信息

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

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

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