Use layui timeline process record:

layui official website timeline introduction is relatively small, it may be too simple, here the timeline is requested through the background data. Then automatically fill in the corresponding block and encapsulate it;

The code is as follows:

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!=&#39;&#39;){
                                   content2 = content2+h3s+createTime(list[i].time)+h3s2
                               }
                               if(list[i].content!=null&&list[i].content!=&#39;&#39;){
                                   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!=&#39;&#39;){
                                           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?&#39;0&#39;+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;
   }

The call is as follows:

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

Parameter description:

url: actual Background request address;

json: request parameters;

The third parameter: timeline drawing point

Data response form:

{
    "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": "查詢成功！"
}

Parameter description:

"SUCCESS": calling interface status feedback;

"data": timeline content

"time": timeline time; timestamp format can be passed here; You can also pass in a defined time format; such as: "2019-01-04 11:00:42"

"content":content

"url":sub-content

"content": content part

"msg": call interface feedback information; when "SUCCESS" is false, prompt information will be based on this field

Effect display:

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of layui timeline usage example. For more information, please follow other related articles on the PHP Chinese website!