layui timeline使用

使用layui timeline過程記錄：

layui官網時間線介紹比較少，可能是太簡單了，這里把時間線通過請求后台數據。再自動填寫到對應區塊，進行了封裝；

代碼如下：

  function timelineshow(url,json,div){
		 $.ajax({
				url: url,
				type: "post",
				data: json,
				dataType: "json",
				success: function (res) {
					console.log(res);
					if(res.SUCCESS===true){

						var list = res.data;
						
						var uls = "<ul class=\"layui-timeline\">";
						var uls1 = "<ul>";
						var uls2 = "</ul>";
						var lis = "<li class=\"layui-timeline-item\">";
						var lis1 = "<li>";
						var lis2 = "</li>";
						var is = "<i class=\"layui-icon layui-timeline-axis\"></i>";
						var divs = "<div class=\"layui-timeline-content layui-text\">";
						var divs2 = "</div>";
						var h3s = "<h3 class=\"layui-timeline-title\">";
						var h3s2 = "</h3>";
						var ps = "<p>";
						var ps2 = "</p>";
						var br = "</br>";
						
						if(list.length>0){
							var content1 = "";
							content1 = content1+uls;
							for(var i=0; i<list.length; i++){
								var content2 = "";
								content2 = content2+lis+is+divs;
								if(list[i].time!=null&&list[i].time!=''){
									content2 = content2+h3s+createTime(list[i].time)+h3s2
								}
								if(list[i].content!=null&&list[i].content!=''){
									content2 = content2+ps+list[i].content+ps2;
								}
								if(list[i].ul!=null&&list[i].ul.length>0){
									var list2 = list[i].ul;
									content2 = content2+uls1;
									for(var j=0; j<list2.length; j++){
										if(list2[j].content!=null&&list2[j].content!=''){
											content2 = content2+lis1+list2[j].content+lis2;
										}
									}
									content2 = content2+uls2;
									
								}
								
								//可擴展
								content2 = content2 + divs2+lis2;
								content1 =content1+content2;
							}
							content1 = content1 +uls2;

							//再跟你想追加的代碼加到一起插入div中
							document.getElementById(div).innerHTML = content1;
						}
					}else if(res.SUCCESS===false){
						layer.msg(res.msg);
					}
				}
				
			}); 
	}

 function createTime(v){
		var date = new Date(v);
	    var y = date.getFullYear();
	    var m = date.getMonth()+1;
	    m = m<10?'0'+m:m;
	    var d = date.getDate();
	    d = d<10?("0"+d):d;
	    var h = date.getHours();
	    h = h<10?("0"+h):h;
	    var ms = date.getMinutes();
	    ms = ms<10?("0"+ms):ms;
	    var s = date.getSeconds();
	    s = s<10?("0"+s):s;
	    var str = y+"-"+m+"-"+d+" "+h+":"+ms+":"+s;
	    return str;
	}

 調用如下：

var url = "./json/timeline/dome1.js";
var json = {}; 
timelineshow(url,json,"div1");//url為請求數據地址；json為參數json字符串；打三個參數為時間線顯示位置標簽id

參數說明：

　　url:實際后台請求地址；

　　json:請求參數；

　　第三個參數:時間線繪制點

數據響應形式：

{
	"SUCCESS": true,
	"data": [{
		"time": "2019-01-04 11:00:42",
		"content":"這是一條測試內容",
		"ul":[{
			"content":"子內容1"
		},
		{
			"content":"子內容1"
		}]
	}, {
		"time": 1546571007000,
		"content":"這是一條測試內容",
		"ul":[{
			"content":"子內容1"
		},
		{
			"content":"子內容1"
		}]
	}, {
		"time": 1546571096000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546571118000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546571159000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546571372000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546571458000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546571721000,
		"content":"這是一條測試內容"
	}, {
		"time": 1546572137000,
		"content":"這是一條測試內容"
	}],
	"msg": "查詢成功！"
}

 參數說明：

　　“SUCCESS”：調用接口狀態反饋；

　　“data”:時間線內容

　　　　“time”:時間線時間;這里可以傳入時間戳形式；也可以傳入定義好的時間格式;如："2019-01-04 11:00:42"

　　　　“content”:內容

　　　　“url”:子內容

　　　　　　“content”:內容部分

　　“msg”:調用接口反饋信息；當“SUCCESS”為false時，會根據此字段進行提示信息

效果展示：