layui timeline使用示例

尚 2019-11-30 13:16 4305浏览转载

使用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 uls2 = "

"; var lis1 = "
"; var lis2 = "



"; var divs2 = "

"; var h3s2 = "

"; var ps2 = "

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

效果展示：