使用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!=''){ content2 = content2+h3s+createTime(list[i].time)+h3s2 } if(list[i].content!=null&&list[i].content!=''){ 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!=''){ 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?'0'+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時,會根據此欄位進行提示訊息效果顯示: 更多layui知識請關注
layui使用教學欄位。
以上是layui timeline使用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!