显示时间轴

在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);
}

时间: 2024-10-13 04:53:15

显示时间轴的相关文章

Lifeline功能介绍01——日历及时间轴的查看

"Lifeline功能介绍"系列博客主要介绍目前为止已经实现的网站功能,包括:日历及时间轴的查看.个人事件的添加.课堂信息的查询等. 本篇介绍--日历及时间轴的查看 #用户登陆后会进入主页界面,为日历上对事件的动态显示,如图1 图1 在日历上已经过去的事项会显示为灰色,未结束的事件为彩色:而且可以通过右下角的下拉选项切换多种语言的日历风格. #点击右上角的选项,可以将日历模式的显示,切换为列表显示,如图2 图2 此界面同样支持事件的动态显示和多种语言风格的切换. #点击日历或者列表中的

进度条与时间轴绑定显示图片

第一步是下载Bootstrap和Glyphicons库.你可以找到外部引用Bootstrap CDN主机上的图标字体文件.我分开这些样式表到不同的文件,同时创建一个新的文档称为styles.css. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!doctype html> <html lang="en-US"> <head>   <meta charset="utf-8">   <meta

Android 时间轴

效果图: 数据是随便填的,显得有点乱,但是不影响效果.实现方面主要是用ListView来实现,主要是根据ListView的item位置与上一条数据进行比较,来控制时间的显示隐藏效果.思路很简单,下面看代码实现: 首先是页面的整体布局,很简单,就一个ListView: res/layout/activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

DevExpress之ChartControl实现时间轴实例 z

using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; namespace DevExpressChart { public partial class winDateTime : Form { public winDateTime() { InitializeComponent(); } private void winDateTime_Load(object sende

纯css+js水平时间轴

自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id="timeline" style="width: 902px; height: 60px;"> <ul id="dates" style="position: absolute; right: 0; top: -10px;&q

4-Highcharts曲线图之时间轴折线图

鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

SNF开发平台WinForm之十三-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework

一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void UCTimeAxisData() { //增加节点 List<KeyValuePair<string, string>> list = new List<KeyValuePair<string, string>>(); list.Add(new KeyValueP

timeline时间轴进度“群英荟萃”

timeline时间轴进度“群英荟萃” 是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 timeline时间轴 大家族的“群英荟萃”. 1.时间轴进度条-PC版 结构简单的如下: <div class="pub-wrap"> <ul class="pub-process"> <li class="active">