Home > Web Front-end > Layui Tutorial > layui timeline usage example

layui timeline usage example

Release: 2019-11-30 13:16:28
forward
4059 people have browsed it

layui timeline usage example

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;
   }
Copy after login

The call is as follows:

var url = "./json/timeline/dome1.js";<br>var json = {}; <br>timelineshow(url,json,"div1");//url为请求数据地址;json为参数json字符串;打三个参数为时间线显示位置标签id
Copy after login

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": "查询成功!"
}
Copy after login

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:

layui timeline usage example

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!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template