本文介绍在JSP页面和JS代码中使用JSTL和Moment.js进行时间格式化的两种方法，同时提供自定义函数实现时间格式化，适用于异步加载列表信息场景。
时间格式化
1.同步请求的方式，jsp页面进行格式化：
<fmt:formatDate value="${cust.addtime}" pattern="yyyy-MM-dd"></fmt:formatDate>
前端框架地址：https://www.bootcdn.cn/all/
2.在js代码中，就不能直接使用jstl进行格式化了。js中格式化时间有两种方式
第一种：使用moment.js插件
1.1 :引入 moment.js插件：
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
1.2：调用moment.js中的函数进行格式化时间
var starttime = moment(item.starttime).format("YYYY-MM-DD");
第二种： 使用自己封装的函数
function parseDate(args){
var date = new Date(args);
var year=date.getFullYear();//结合date对象使用，返回当前年份
var month = date.getMonth()+1;
if(month < 10){
month = "0"+month;
}
var day = date.getDate();
if(day < 10){
day = "0"+day;
}
return year+"-"+month+"-"+day;
}
异步加载列表信息
请求后端代码，遍历拿到的数据
$(function () {
$.ajax({
type:'get',
url:'/pms/pro/list',
success:function (msg) {
$(msg).each(function (index,item) {
})
}
})
})
将"转换为单引号，并改为拼字符串的形式
填写数据
定位到页面上，给第二行加上id字段，将数据填充到第一行和第二行之间，采用before方法定位第二行id
如果采用after方法，定位第一行id的话，遍历的数据顺序会有问题
目前的展示效果为
存在的问题有
- 数据未完全拿到
- 时间显示格式不对
解决问题一：
mybatis的逆向工程生成的代码查询仅支持单表操作，方法一是自己写sql语句，这种方法就不展示了，方法二是在实体类中做关联，service层手动填写数据
在实体类添加关联的类，并生成get和set方法
注入注解
手动给新添加的属性赋值
时间格式化方法一：插件的形式
引入js
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
直接调用js的moment方法，注意格式中的Y一定要大写
"<td>"+moment(item.starttime).format("YYYY-MM-DD")+"</td>" +
"<td>"+moment(item.buildtime).format("YYYY-MM-DD")+"</td>" +
"<td>"+moment(item.endtime).format("YYYY-MM-DD")+"</td>" +
方法二是使用自己写的函数，具体函数见上面
完整代码
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>项目信息管理</title>
<link rel="stylesheet" type="text/css" href="skin/css/base.css">
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" >
$(function () {
$.ajax({
type:'get',
url:'/pms/pro/list',
success:function (msg) {
$(msg).each(function (index,item) {
var tr="<tr align='center' bgcolor='#FFFFFF' onMouseMove='javascript:this.bgColor='#FCFDEE';'" +
"onMouseOut='javascript:this.bgColor='#FFFFFF';' height='22'>" +
"<td><input name='id' type='checkbox' id='id' value='item.pid' class='np'></td>" +
"<td>"+(index+1)+"</td>" +
"<td align='left'><a href=''><u>"+item.pname+"</u></a></td>" +
"<td>"+item.customer.comname+"</td>" +
"<td>"+item.comper+"</td>" +
"<td>"+item.employee.ename+"</td>" +
"<td>"+item.empcount+"</td>" +
"<td>"+moment(item.starttime).format("YYYY-MM-DD")+"</td>" +
"<td>"+moment(item.buildtime).format("YYYY-MM-DD")+"</td>" +
"<td>"+moment(item.endtime).format("YYYY-MM-DD")+"</td>" +
"<td>进行中</td>" +
"<td><a href='project-base-edit.jsp'>编辑</a> | <a href='project-base-look.jsp'>查看详情</a></td>" +
"</tr>";
$("#dataTr").before(tr);
})
}
})
})
</script>
</head>
<body leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>
<!-- 快速转换位置按钮 -->
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D1DDAA" align="center">
<tr>
<td height="26" background="skin/images/newlinebg3.gif">
<table width="58%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
当前位置:项目管理>>基本信息管理
</td>
<td>
<input type='button' class="coolbg np" onClick="location='project-base-add.html';"
value='添加新项目'/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 搜索表单 -->
<form name='form3' action='' method='get'>
<input type='hidden' name='dopost' value=''/>
<table width='98%' border='0' cellpadding='1' cellspacing='1' bgcolor='#CBD8AC' align="center"
style="margin-top:8px">
<tr bgcolor='#EEF4EA'>
<td background='skin/images/wbg.gif' align='center'>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
<td width='90' align='center'>搜索条件：</td>
<td width='160'>
<select name='cid' style='width:150'>
<option value='0'>选择类型...</option>
<option value='1'>项目名称</option>
<option value='2'>项目经理</option>
</select>
</td>
<td width='70'>
关键字：
</td>
<td width='160'>
<input type='text' name='keyword' value='' style='width:120px'/>
</td>
<td width='110'>
<select name='orderby' style='width:120px'>
<option value='id'>排序...</option>
<option value='pubdate'>立项时间</option>
<option value='pubdate'>计划完成时间</option>
</select>
</td>
<td>
<input name="imageField" type="image" src="skin/images/frame/search.gif"
width="45" height="20" border="0" class="np"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<!-- 内容列表 -->
<form name="form2">
<table width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center"
style="margin-top:8px">
<tr bgcolor="#E7E7E7">
<td height="24" colspan="12" background="skin/images/tbg.gif"> 项目信息列表 </td>
</tr>
<tr align="center" bgcolor="#FAFAF1" height="22">
<td width="4%">选择</td>
<td width="6%">序号</td>
<td width="10%">项目名称</td>
<td width="10%">客户公司名称</td>
<td width="10%">客户方负责人</td>
<td width="5%">项目经理</td>
<td width="8%">开发人员数</td>
<td width="6%">立项时间</td>
<td width="8%">最近更新时间</td>
<td width="8%">计划完成时间</td>
<td width="8%">状态</td>
<td width="10%">操作</td>
</tr>
<tr bgcolor="#FAFAF1" id="dataTr">
<td height="28" colspan="12">
<a href="" class="coolbg">全选</a>
<a href="" class="coolbg">反选</a>
<a href="" class="coolbg"> 删除 </a>
<a href="" class="coolbg"> 导出Excel </a>
</td>
</tr>
<tr align="right" bgcolor="#EEF4EA">
<td height="36" colspan="12" align="center"><!--翻页代码 --></td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
