显示时间轴

在html界面进行时间轴的搭建，和数据字符串的拼接，之后进入到controller中，按照springMVC+MyBits框架流程执行，返回数据值。

<script type="text/javascript">
$(function(){
$.ajaxUrl({
type:"POST",
url:"cloud/record/getList",
success:function(result) {
/* var tempDate = "";
for(var i=0;i<result.data.length;i++){
var str = ‘<div class="timeline-container timeline-style2">‘;
var date = getDate(result.data[i].createTime);
if(date != tempDate){
str += ‘<span class="timeline-label"> <b>‘+date+‘</b></span>‘;
} else {
str += ‘‘;
}
str += ‘</div>‘;
} */
var tempData;
var item = ‘‘;
for(var i=0;i<result.data.length;i+=2){


if(i==0){
tempData = result.data[i];
} else {
if(getDate(result.data[i].operationTime) != getDate(tempData.operationTime)){
var htmlStr = ‘<div class="timeline-container timeline-style2">‘;
htmlStr += ‘<span class="timeline-label"> <b>‘+getDate(tempData.operationTime)+‘</b></span>‘;
htmlStr += ‘<div class="timeline-items">‘;
htmlStr += item;
htmlStr += ‘</div></div>‘;
$("#timeline").append(htmlStr);
item = ‘‘;
}
tempData = result.data[i];
}
var time = new Date(result.data[i].operationTime).getHours() +":"+new Date(result.data[i].operationTime).getMinutes();
item += ‘<div class="timeline-item clearfix">‘;
item += ‘<div class="timeline-info"><span class="timeline-date">‘+time+‘</span> <i class="timeline-indicator btn btn-info no-hover"></i></div>‘;
item += ‘<div class="widget-box transparent"><div class="widget-body">‘;
item += ‘<div class="widget-main no-padding">‘;
item += ‘<span class="bigger-110">修改前：操作人：‘+result.data[i].operator+‘</span><span class="bigger-110">&nbsp;&nbsp;&nbsp;&nbsp;ip地址：‘+result.data[i].ipaddress+‘</span><span class="bigger-110">&nbsp;&nbsp;&nbsp;&nbsp;ip状态：‘+result.data[i].status+‘</span> <br />‘;
item += ‘<span class="bigger-110">修改后：操作人：‘+result.data[i+1].operator+‘</span><span class="bigger-110">&nbsp;&nbsp;&nbsp;&nbsp;ip地址：‘+result.data[i+1].ipaddress+‘</span><span class="bigger-110">&nbsp;&nbsp;&nbsp;&nbsp;ip状态：‘+result.data[i+1].status+‘</span></div>‘;
item += ‘</div></div></div>‘;
}
var htmlStr = ‘<div class="timeline-container timeline-style2">‘;
htmlStr += ‘<span class="timeline-label"> <b>‘+getDate(tempData.operationTime)+‘</b></span>‘;
htmlStr += ‘<div class="timeline-items">‘;
htmlStr += item;
htmlStr += ‘</div></div>‘;
$("#timeline").append(htmlStr);

}
});
});
function getDate(date){
var time = new Date(date).toLocaleDateString();
if(time == new Date().toLocaleDateString()){
return "今天";
} else if(time == new Date(new Date()-24*60*60*1000).toLocaleDateString()){
return "昨天";
} else {
return time;
}
}

</script>

//controller

/**
* 查询用户列表
*
* @param username
* @return
*/
@RequestMapping(value = "/getList")
@ResponseBody
public JSONResult<List<Resume>> selectList(){
final List<Resume> resume = recordService.selectAllList();
return new JSONResult<List<Resume>>(resume);
}

显示时间轴

原文：http://www.cnblogs.com/akp1234/p/6418665.html