JavaScript实现时间轴请求后端数据进行加载显示

大体页面显示如图片（页面图片之类是当初下载的一个插件）：（该功能在默认情况下是显示当年的全部信息，当你点击不同的年份会依次请求不同的数据表，然后按照自己的转换标准进行全部信息显示，当然js里面的字段都是数据库定义的，所以可以按照代码进行相应的修改，上面button或者下拉列表等条件当点击时进行传送数据库表名，后面进行相应的递送数据，然后再次初始化时间轴信息展示（每次都要清空一下），如果后端将数据拼接好那就prefect了。）



图片因为电脑没有网络连接，偷个懒，用手机拍了一下（放的太大，像素粒太严重），大致明白功能就好了。O(∩_∩)O哈哈~
1、页面HTML代码如下：

<div class="path-info pull-left magin-bottom" style="clear: both;">

<!--当数据加载过慢时，出现的一个浮动层-->

    <div class="trail">
<i class="fa fa-spinner fa-spin"></i> 正在加载，请稍等...    </div>

<!--没有数据时产生的一个提示-->

    <div class="trail-result">没有数据！    </div>    <div class="title"><i class="iconfont icon-guiji"></i> 轨迹信息    </div>    <div class="content" style="background-color: #F0F0F0;"><!--下面是按钮group，因为不同的条件进行切换--><div class="btnGroup">    <button type="button" class="btn btn-default activeFont" style="background-color: #2375cc;border-color: #2375cc ;" value="all">全选</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #2C9BB7;border-color: #2C9BB7 ;" value="wbswry">网吧</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #FEB42D;border-color: #FEB42D ;" value="lggnlk">旅店</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #64B24F;border-color: #64B24F ;" value="mhlkcjxx">民航</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #44B9B0;border-color: #44B9B0 ;" value="" disabled="disabled">动车</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #F57841;border-color: #F57841 ;" value="" disabled="disabled">门诊</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #5775F3;border-color: #5775F3 ;" value="" disabled="disabled">住院</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #B9BF15;border-color: #B9BF15 ;" value="" disabled="disabled">车辆卡口</button></div><div class="box clearfix">    <ul class="event_year list-unstyled pull-left">                    <!--年份的初始化-->    </ul>    <ul class="event_list pull-right list-unstyled"><div><!--主要的右边信息，下面是个模板，js的字符串拼接成这样-->    <h3 id="2017">2017</h3>    <!--<li>    <span>10月12日</span>    <p><span>文字信息</span></p></li><li>    <span>10月7日</span>    <p><span>文字信息</span></p></li>--></div>    </ul></div>    </div></div>

由于当时比较懒吧，有些样式写成了行内样式，这个本应该不推荐这样写的，请见谅！

2、页面基本样式如下：

/*时间轴*/
.path-info .trail{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 4px;
background-color: rgba(0,0,0,0.6);
text-align: center;
color: #ffffff;
font-size: 30px;
line-height: 543px;
display: block;
}
.path-info .trail-result{
position: absolute;
width: 200px;
height: 150px;
text-align: center;
line-height: 150px;
color: #fff;
z-index: 9;
border-radius: 4px;
background-color: rgba(0,0,0,0.6);
font-size: 24px;
display: none;
top:200px;
right: 100px;
}
.activeFont{
color: darkred;
font-weight: bold
}
.fontcolorfff{
color: #FFFFFF;
font-weight: normal;
}
.box{
width: 100%;
}
.box .event_year{
width:60px;
text-align:center;
float:left;
margin-top:30px;
}
.box .event_year li{
width:60px;
height:40px;
line-height:40px;
background:#FFF;
margin-bottom:1px;
font-size:18px;
color:#828282;
cursor:pointer;
//background: #E5E5E5;
}
.box .event_year li.current {
width: 70px;
background: #0066ff url(../img/jian.png) 60px 0 no-repeat;
color: #FFF;
text-align: center;
padding-right: 9px;
}
.box .event_year li label{
cursor: pointer;
}
.box .event_list{
width: calc(100% - 80px);
height: 442px;
overflow-y: auto;
background:url(../img/dian3.png) 70px 0 repeat-y;
margin:10px 0 6px 0;
}
.box .event_list h3 {
margin:0 0 10px 63px;
font-size:24px;
font-family:Georgia;
color:#0066ff;
padding-left:25px;
background:url(../img/jian.png) 0 -45px no-repeat;
height:38px;
line-height:30px;
font-style:italic;
}
.box .event_list li {
background:url(../img/jian.png) 67px -80px no-repeat;
}
.box .event_list li span {
width:60px;
text-align:right;
display:block;
float:left;
margin-top:12px;
}
.box .event_list li p {
//width:680px;
margin-left:24px;
display:inline-block;
padding-left:10px;
background:url(../img/jian.png) -21px 0 no-repeat;
//line-height:25px;
_float:left;
}
.box .event_list li p span {
width:360px;
text-align:left;
border-bottom:2px solid #DDD;
padding:10px 15px;
background:#FFF;
margin:0;
}

这些样式我按自己要求修改并且添加了一部分，大部分包括图片等都是我下载的一个小插件里面的，请见谅，O(∩_∩)O哈哈~。
3、接下来是js部分，比较重点的部分：

var timePath={
/**这是需要传到后端的条件，以自己情况而定
* 表名
* 传入字段(身份证)
* 传入字段值
* 传入字段年
* 传入字段年值
* 页码
* 一页多少条
* 排序字段
* 是否排序
*/
params:{
index:"",
column_name:"",
column_value:"",
like_column_name:"",
like_column_value:'2017',
pagenum:1,
pagesize:20,
order_column_name:"",
order:true
},
all:[],//取不同数据显示
Init:function () {
var dateNow=new Date();
var year=dateNow.getFullYear();
//console.log(year);
var idcard=suspect.GetQueryString('id');//身份证号
this.timeLineYears();//years's botton
/*
* 初始化查询全部信息
* 网吧
* 民航
* 住宿
* */
this.publicCall(year,idcard);

this.timeLabel();
this.classifyButton(year,idcard);

},
//轨迹信息渲染8个年份
timeLineYears:function(){
var Today=new Date();

4000
var nowYear=Today.getFullYear();
var yearlist=new Array();
var _yearInfo='';
for(var i=0;i<8;i++){
yearlist.push(nowYear--);
}
_yearInfo="<li class='current'><label for='"+yearlist[0]+"'>"+yearlist[0]+"</label></li>";

yearlist.map(function(value,index){
if(!index==0){
_yearInfo+="<li><label for='"+value+"'>"+value+"</label></li>"
}
})
$(".event_year").html('');
$(".event_year").append(_yearInfo);
},
//年份点击传值
timeLabel:function () {
var idcard=suspect.GetQueryString('id');//身份证号
//点击不同年份
$('.box label').click(function() {
$(".trail").css("display","block");

$(".btnGroup button").eq(0).addClass("activeFont").removeClass("fontcolorfff");
$(".btnGroup button").eq(0).siblings('button').addClass("fontcolorfff").removeClass("activeFont");

timePath.all=[];//没次初始化对象

$('.event_year>li').removeClass('current');
$(this).parent('li').addClass('current');
//获取点击的年数
var year = $(this).attr('for');
$(".event_list div h3").text(year);

timePath.publicCall(year,idcard);//点击全新加载初始化

timePath.classifyButton(year,idcard);

$(".trail").css("display","none");
});
},
//button点击传值
classifyButton:function (year,idcard) {
$(".btnGroup button").click(function () {

$(".trail").css("display","block");

timePath.all=[];//初始化空数据
var indexvalue=$(this).val();
//console.log(indexvalue);

//按钮切换
$(this).addClass("activeFont").removeClass("fontcolorfff");
$(this).siblings('button').addClass("fontcolorfff").removeClass("activeFont");

if(indexvalue=='wbswry'){

timePath.timeLineIni({index:"wbswry",column_name:"zjhm",column_value:idcard,like_column_name:"swkssj",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"swkssj", order:true});

}else if(indexvalue=='mhlkcjxx'){

timePath.timeLineIni({index:"mhlkcjxx",column_name:"cert_no",column_value:idcard,like_column_name:"flt_date",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"flt_date", order:true});

}else if(indexvalue=='lggnlk'){

timePath.timeLineIni({index:"lggnlk",column_name:"zjhm",column_value:idcard,like_column_name:"rzsj",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"rzsj", order:true});

}else if(indexvalue=='all'){

timePath.publicCall(year,idcard);

}
$(".trail").css("display","none");
timePath.timeLineAxis(timePath.all);//数据

});
},
//轨迹信息初始化
timeLineIni:function(params){
$.ajax({
type:"post",
url:"/search/searchPageByMuliCondtion",
async:false,
data:params,
dataType:'json',
success:function (data) {
if(data.code=='200'){
if(params.index=='wbswry'){
$.each(data.data,function (index,elem) {
timePath.all.push({'date':elem.swkssj,'value':elem.yycsmc});
})
}else if(params.index=='lggnlk'){
$.each(data.data,function (index,elem) {
timePath.all.push({'date':elem.rzsj,'value':elem.lgmc+elem.rzfh});
})
}else if(params.index=='mhlkcjxx'){
$.each(data.data,function (index,elem) {
timePath.all.push({'date':elem.flt_date,'value':"航班号码："+elem.flt_number});
})
}

//console.log(timePath.all);
//timePath.timeLineAxis(timePath.all);
}

},
error:function (data) {
console.log('请求失败！');
}
})

},
//轨迹信息渲染数轴上的数据
timeLineAxis:function(data){

if(data.length==0){
$(".trail-result").css("display","block");
}else{
var _html='';
$(".trail-result").css("display","none");
}
/*先排序再初始化数据*/
timePath.sortDate(data);
var _html='';
data.forEach(function(item,index){
//console.log(item);
_html+="<li><span>"+item.date.slice(4,6)+"月"+item.date.slice(6,8)+"日"+"</span><p><span>"+item.value+"</span></p></li>"
})
//console.log(_html);
$(".event_list div li").remove();
$(".event_list div").append(_html);
},
//初始化调用
publicCall:function (year,idcard) {
this.timeLineIni({index:"wbswry",column_name:"zjhm",column_value:idcard,like_column_name:"swkssj",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"swkssj", order:true});
this.timeLineIni({index:"mhlkcjxx",column_name:"cert_no",column_value:idcard,like_column_name:"flt_date",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"flt_date", order:true});
this.timeLineIni({index:"lggnlk",column_name:"zjhm",column_value:idcard,like_column_name:"rzsj",like_column_value:year, pagenum:1, pagesize:20, order_column_name:"rzsj", order:true});
this.timeLineAxis(timePath.all);
$(".trail").css("display","none");
},
//数据按时间排序
sortDate:function (data) {
var tran;
for(var i=0;i<data.length;i++){
//console.log(data[i]);
for(var j=data.length-1;j>i;j--){
/*
data[i].date.slice(4,6);月
data[i].date.slice(6,8);日
*/
var imonth=data[i].date.slice(4,6);
var jmonth=data[j].date.slice(4,6);
var iday=data[i].date.slice(6,8);
var jday=data[j].date.slice(6,8);
/*前面的月份比后面的大直接交换复值*/
if(imonth > jmonth){
tran=data[j];
data[j]=data[i];
data[i]=tran;
}else if(imonth == jmonth){
if(iday > jday){
tran=data[j];
data[j]=data[i];
data[i]=tran;
};
};
};
};
//console.log(data);
return data;

}
}

代码部分，这个主要是从后端取得数据，所以我上面大致讲了思路，现实肯定要看与后端商量数据格式之类的，当然现实内容的格式也要依个人情况而定。
个人自觉自己写的代码很简单易懂，希望大家见谅啦。当看见别人写的代码感觉好羡慕，好高大上，好腻害啊，O(∩_∩)O哈哈~。
开始的时候本想用filter去控制按钮的点击情况，但是后来说有没有数据都这样，所以去除了那个方法，不过新加的几种方法真的很好用，JavaScript还是真的很强大。
本次小小分享一下自己写的小功能，如能帮到大家，那真的很高兴呢！