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 = "
"; var divs2 = "
"; var h3s = ""; var h3s2 = "
"; var ps = ""; var ps2 = "
"; var br = ""; if(list.length>0){ var content1 = ""; content1 = content1+uls; for(var i=0; i0){ var list2 = list[i].ul; content2 = content2+uls1; for(var j=0; j调用如下:
var url = "./json/timeline/dome1.js";<br>var json = {}; <br>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时,会根据此字段进行提示信息
效果展示:
更多layui知识请关注layui使用教程栏目。