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 uls1 = "
";
                       var uls2 = "
";
                       var lis = "
";
                       var lis1 = "
";
                       var lis2 = "
";
                       var is = "";
                       var divs = "
";
                       var divs2 = "
";
                       var h4s = "
";
                       var h4s2 = "
";
                       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";
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时，会根据此字段进行提示信息
效果展示：
以上就是layui timeline使用示例的详细内容，更多请关注创新互联网站制作公司其它相关文章！
            

            分享标题：layui中timeline的使用方法-创新互联            

            网址分享：http://cqcxhl.com/article/dopdgc.html