index.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
3 <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
4 <%
5 String path = request.getContextPath();
6 String basePath = request.getScheme() + "://"
7 + request.getServerName() + ":" + request.getServerPort()
8 + path + "/";
9 %>
10
11 <!DOCTYPE HTML>
12 <html>
13 <head>
14 <base href="<%=basePath%>">
15 <title>账单管理</title>
16 <meta http-equiv="pragma" content="no-cache">
17 <meta http-equiv="cache-control" content="no-cache">
18 <meta http-equiv="expires" content="0">
19 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
20 <style>
21 table{width:700px;}
22 table ,tr ,td, th
23 {
24 text-align: center;
25 border:1px black solid;
26 border-collapse:collapse;
27 }
28 .setGreen{background-color: green;}
29 .over{background-color:#f9360d;}
30 span{font-weigh:bold;color:red;}
31 </style>
32 <script>
33 function setTableColor()
34 {
35 var table = $("#showTable")[0];
36 for(var i = 0; i < table.rows.length; i++)
37 {
38 if(i % 2 == 0)
39 {
40 table.rows[i].className = "setGreen";
41 }
42 var name;
43 table.rows[i].onmouseover = function()
44 {
45 name = this.className;
46 this.className = "over";
47 }
48 table.rows[i].onmouseout = function()
49 {
50 this.className = name;
51 }
52 }
53 }
54 $(
55 function loadType()
56 {
57 var select = $("#bookClass");
58 select.html("<option value='0'>不限</option>");
59 $.ajax
60 ({
61 url:"type_query",
62 type:"post",
63 dataType:"json",
64 success:function(data)
65 {
66 var types = data.typeList;
67 for(var i = 0; i < types.length; i++)
68 {
69 var option = "<option value='"+types[i].id+"'>"+types[i].name+"</option>";
70 select.append(option);
71 }
72 },
73 error:function()
74 {
75 alert("服务器忙！");
76 }
77 });
78 }
79 );
80 function checkTime(timeInput)
81 {
82 var time = timeInput.value;
83 var regTime = /^(d{4})-(0d{1}|1[0-2])-(0d{1}|[12]d{1}|3[01])$/;
84 var error = $("#error");
85 error.html("");
86 if(regTime.test(time) || time == "")
87 {
88 return true;
89 }
90 error.html("日期格式不正确!(yyyy-MM-dd)");
91 return false;
92 }
93 function checkAll()
94 {
95 if(checkTime($("#begintime")[0]) && checkTime($("#endtime")[0]))
96 {
97 return true;
98 }
99 return false;
100 }
101 </script>
102 </head>
103 <body>
104 <div align="center">
105 <h1>账单管理系统</h1>
106 <form action="bill_query" method="post" onsubmit="return checkAll();">
107 类型：<select id="bookClass" name="typeid"></select>
108 时间：<input type="text" id="begintime" name="begintime" onblur="checkTime(this);" /> 到
109 <input type="text" id="endtime" name="endtime" onblur="checkTime(this);" />
110 <input type="submit" id="query" value="搜索" onclick="query(1,10);" />
111 <input type="button" value="记账" onclick="javascript:window.location='record.jsp'" /></br>
112 </br></form>
113 <table id="showTable">
114 <tr><th>行号</th><th>标题</th><th>记账时间</th><th>类别</th><th>金额</th><th>说明</th></tr>
115 <c:forEach items="${billList}" var="each" varStatus="status">
116 <tr>
117 <td>${status.count}</td>
118 <td>${each.title}</td>
119 <td>${each.billtime}</td>
120 <td>
121 <c:forEach items="${typeList}" var="type">
122 <c:if test="${each.typeid == type.id}">
123 ${type.name}
124 </c:if>
125 </c:forEach>
126 </td>
127 <td>${each.price}</td>
128 <td>${each.remark}</td>
129 </tr>
130 </c:forEach>
131 <c:if test="${billList == null || fn:length(billList) == 0}">
132 <tr><td colspan="6"><h3>没有查到任何数据!</h3></td></tr>
133 </c:if>
134 <c:if test="true">
135 <script>setTableColor();</script>
136 </c:if>
137 </table>
138 <span><h3 id="error"></h3></span>
139 </div>
140 </body>
141 </html>
