报表开发总结（1）

总结一下这四天做的两张报表，对于里面我新接触的和自己感觉重要的东西都会写出来。
前端用的是miniUI框架（不要问为什么，我从16年毕业到现在，这家公司我所在的项目前端都是miniUI或者easyUI）
后端技术是：spring mvc
数据库用的 ：oralce
先简单分析一下这个报表，思路有两个：
（1）把整个展示当做一个datagrid，对于中间的那些中文，可以在数据库中查找出来，然后显示在界面。
（2）分两个datagird，来合并整个画面，这样做起来比较简单，在数据库中只需要每个datagrid各自执行各自的存储就可以，最后在画面进行显示就OK
我采用的是第二种做法，避免在数据库查找过多中文。。。。
下面总结我用到的前端后者后端应该注意的地方：
（1）界面查询条件接产单位，根据不同权限登录显示不同，比如权限为2的登录以后直接显示自己的单位名称，权限为1的登录，显示所有权限为2的单位名称，这里采用了JSTL中的<c:choose></c:choose>标签。
语法格式如下：

<c:choose>    <c:when test="<boolean>"/>        ...    </c:when>    <c:when test="<boolean>"/>        ...    </c:when>    ...    ...    <c:otherwise>        ...    </c:otherwise></c:choose>

该标签相当于java中的switch，default相当于该标签中的<c:otherwise></c:otherwise>
其中<c:choose>和<c:otherwise>没有属性，<c:when>标签是有属性的。
（2）查询条件中统计年月，要求只可以查询当前年月之前的数据，所以此处有JS校验
当选择的是年月，采用了如下的JS校验：

var now = new Date();            var month = (now.getMonth()+1)>10?(now.getMonth()+1):"0"+(now.getMonth()+1);            var yf = now.getFullYear()+"-"+month;            if(tjrq > yf ){                mini.alert('不能查询本月之后的报表数据！');                return;            }

其中var tjrq=mini.get('tjrq').getFormValue();获取。
对于选择年，不可以大于当前年，是采用了一个onDrawDate属性，具体如下：

 function onDrawDate(e) {            var date = e.date;            var d = new Date();            if (date.getTime() > d.getTime()) {                e.allowSelect = false;            }        }

（3）关于界面中的单元格合并问题，采用的是miniUI的方法，
需要注意如下事项：
（a）必须在datagrid中写 onLoad=”onLoad”，这样才可以触发合并单元格事件。
（b）必须在后面有mergeCells方法，否则只是触发事件，但是不可以达到合并单元格的效果。
（c）可以找规律，写循环来合并单元格，这样可以减少重复代码量。
代码如下：

function onLoad(e){        var grid = e.sender;        var merges = [                      {rowIndex:1,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:1,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:1,columnIndex:11,rowSpan:1,colSpan:5},                     {rowIndex:2,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:2,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:2,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:3,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:3,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:3,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:4,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:4,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:4,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:5,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:5,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:5,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:6,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:6,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:6,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:7,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:7,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:7,columnIndex:11,rowSpan:1,colSpan:5},                      {rowIndex:8,columnIndex:1,rowSpan:1,colSpan:5},                      {rowIndex:8,columnIndex:6,rowSpan:1,colSpan:5},                      {rowIndex:8,columnIndex:11,rowSpan:1,colSpan:5}                     ];           grid.mergeCells(merges);    }     

（4）对于标题居中需要使用headerAlign="center"属性，从后台查找出来的数据默认是左对齐的，如果需要居中显示则需要使用align="center"属性

（5）这个界面我使用了两个mini-datagrid，所以在查找数据的时候可以这样搞，因为后台走的是两个不同的方法。

grid.load(param);grid1.load(param);