报表开发总结（1）_miniui能做数据报表吗

总结一下这四天做的两张报表，对于里面我新接触的和自己感觉重要的东西都会写出来。
前端用的是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>
1
2
3
4
5
6
7
8
9
10
11
12
13

该标签相当于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;
			}
1
2
3
4
5
6
7

其中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;
            }
        }
1
2
3
4
5
6
7

（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);
	}     
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

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

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