layui timeline使用

痛定思痛。 2021-12-23 10:37 450阅读 0赞

使用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时，会根据此字段进行提示信息

效果展示：

![1289898-20190107112106698-337121981.png][]

转载于:https://www.cnblogs.com/zktww/p/10232179.html

[1289898-20190107112106698-337121981.png]: /images/20211223/93ccf01d40c844518289f112bc6ff3b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 滚动驱动动画 view-timeline (view-timeline-name ❤️ view-timeline-axis )

我们之前在中提到了一个因为绝对定位导致滚动无效的问题, 并使用成功解决了这个问题, 而起到的作用就是指定到底是哪个元素提供与此相似,定义了一个具名的, 通过滚动容器(sc...

￡神魔★判官ぃ/ 2024年05月24日 03:35/ 0 赞/ 55 阅读

相关 CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

TOC/TOC。

偏执的太偏执、/ 2024年05月24日 03:34/ 0 赞/ 53 阅读

相关如何使用 chrome Timeline 工具

使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。这里是开始调查应用中可觉察性能问题的最佳位置。 ![a0f7b13

╰半橙微兮°/ 2023年10月07日 00:26/ 0 赞/ 2 阅读

相关【Unity】TimeLine学习笔记（三）：TimeLine编辑窗口手册

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhMWZf

快来打我*/ 2023年08月17日 17:28/ 0 赞/ 114 阅读

相关 Linux_Distribution_Timeline

[https://upload.wikimedia.org/wikipedia/commons/1/1b/Linux\_Distribution\_Timeline.svg][

叁歲伎倆/ 2023年06月30日 09:27/ 0 赞/ 1 阅读

相关 yarn timeline1，timeline2官网解释

文章地址： [https://hadoop.apache.org/docs/r3.2.0/hadoop-yarn/hadoop-yarn-site/TimelineServ

╰+哭是因爲堅強的太久メ/ 2023年01月01日 01:56/ 0 赞/ 175 阅读

相关 Layui的使用

Layui是一个模块化的前端UI框架，信仰返璞归真，使用原生html、css、js编写，偏后端、PC端。 Layui的特点是美观、轻量级，Bootstrap的特点是简单

柔光的暖阳◎/ 2022年12月07日 15:19/ 0 赞/ 137 阅读

相关 layui citypicker 使用

参见：[https://www.freesion.com/article/3144457988/][https_www.freesion.com_article_3144457

淡淡的烟草味﹌/ 2022年11月21日 03:47/ 0 赞/ 199 阅读

相关 layui timeline使用

使用layui timeline过程记录： layui官网时间线介绍比较少，可能是太简单了，这里把时间线通过请求后台数据。再自动填写到对应区块，进行了封装；代码如下：

痛定思痛。/ 2021年12月23日 10:37/ 0 赞/ 451 阅读

相关如何使用layui

原文地址 [https://blog.csdn.net/qq\_28379809/article/details/80098653][https_blog.csdn.net_q

- 日理万妓/ 2021年09月17日 03:36/ 0 赞/ 440 阅读