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

大体页面显示如图片（页面图片之类是当初下载的一个插件）：

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

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

1、页面HTML代码如下：

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

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

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

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

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();
        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还是真的很强大。

本次小小分享一下自己写的小功能，如能帮到大家，那真的很高兴呢！

原文链接：https://blog.csdn.net/guorui_cara/article/details/79565607