登录  /  注册

layui timeline使用示例

发布: 2019-11-30 13:16:28
转载
3746人浏览过

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 = "<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;
   }
登录后复制

调用如下:

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

效果展示:

1.jpg

更多layui知识请关注layui使用教程栏目。

以上就是layui timeline使用示例的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号