在页面上显示所有雇员数据,注意时间格式已经做了转换,点击编辑,去控制器操作
<table class="easyui-datagrid" title="雇员" style="width:700px;height:250px"
data-options="method:'get',singleSelect:true">
<thead>
<tr>
<th data-options="field:'t1',width:80">编号</th>
<th data-options="field:'t2',width:100">产品</th>
<th data-options="field:'t3',width:80,align:'right'">价格</th>
<th data-options="field:'hiredate',width:100">雇佣时间</th>
<th data-options="field:'t4'">操作</th>
</tr>
</thead>
<!-- 写循环; -->
<c:forEach items="${list }" var="emp">
<tr>
<td>${emp.empno }</td>
<td>${emp.ename }</td>
<td>${emp.sal }</td>
<td><fmt:formatDate value="${emp.hiredate }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td>
<a href='emp/toAddEmp'>增加</a>
<a href='emp/getEmp/${emp.empno}'>编辑</a>
<a href='emp/${emp.empno}/deleteEmp'>删除</a>
<a href='emp/deleteEmp2?empno=${emp.empno}'>删除2</a>
</td>
</tr>
</c:forEach>
</table>
点击编辑,emp/getEmp/${emp.empno},首先要获得当前编号的员工数据,相关dao层等代码,去系列教程前几章查看,本处不再赘述。
@RequestMapping("/getEmp/{empno}")
public ModelAndView getEmp(@PathVariable("empno")int empno){
Emp emp=service.getEmp(empno);
ModelAndView mv=new ModelAndView();
mv.addObject("emp",emp);
mv.setViewName("updateEmp");
return mv;//返回出去的话,有数据,有页面;
}
可以看到控制器代码查询完毕数据后,去了updateEmp页面,如图
下面我们查看更新页面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'addUser.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="easyui/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script></head>
<!--页面数据emp -->
<body>
<form method="post" action="emp/updateEmp">
e编号:<input type="text" name="empno" value="${emp.empno}" readonly id='empno'/><br/>
姓名:<input type="text" name="ename" value="${emp.ename }"/><br/>
工资:<input type="text" name="sal" value="${emp.sal }"/><br/>
入职:<input type="text" class="easyui-datetimebox" style="width:180px" data-options="showSeconds:true"
name="hiredate" value="${emp.hiredate}"/><br/>${emp.hiredate}
<input type="submit" value="修改"/>
</form>
</body>
</html>
请大家观察下,图1和图2,会发现时间已经出现了问题,为什么呢?我们再更新页面单独输出
${emp.hiredate}代码
会发现时间报的是Thu Apr 06 00:00:00 CST 2017,是2017年4月6日,时间对,但是格式不对。
原来问题的症结出在这里,datetimebox控件默认格式是yyyy-mm-dd HH:mm:ss,而数据库的格式与之不匹配,因此,需要将数据库格式做下转换才可以。
可以在控制器中增加如下代码:
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String hiredate=sdf.format(emp.getHiredate());
//sdf.setLenient(false);setLenient用于设置Calendar是否宽松解析字符串,如果为false,则严格解析;默认为true,宽松解析
System.out.println(hiredate+"----");
mv.addObject("hiredate", hiredate);
在updateEmp页面,时间值为:${hiredate}即可。如图
其他处理方式:众所周知Oracle数据库中的date与众不同,在Easyui中显示数据库的date类型如果不经过转化为显示为Object。因此需要经过处理。
利用js函数实现转换处理也可以。