Beispiel für die Verwendung der Laui-Timeline

Verwenden Sie den Layui-Timeline-Prozessdatensatz:

Die Timeline-Einführung auf der offiziellen Website von Layui ist relativ klein und möglicherweise zu einfach. Hier wird die Timeline anhand der Hintergrunddaten angefordert. Füllen Sie dann automatisch den entsprechenden Block aus und kapseln Sie ihn. Der

-Code lautet wie folgt:

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;
   }

Aufruf wie folgt:

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

Parameterbeschreibung:

url : tatsächliche Hintergrundanforderungsadresse;

json: Anforderungsparameter;

"ERFOLGREICH": Feedback zum Aufruf der Schnittstelle;

"Daten": Zeitleisteninhalt

"Zeit": Zeitleistenformat kann hier eingegeben werden; auch in einem definierten Zeitformat übergeben; wie zum Beispiel: „2019-01-04 11:00:42“

"content":content

"url":sub-content

"content": Inhaltsteil

"msg": Feedback-Informationen zur Aufrufschnittstelle; wenn „SUCCESS“ falsch ist, basieren die Eingabeaufforderungsinformationen auf diesem Feld

Effektanzeige:

Weitere Laui-Kenntnisse finden Sie in der Spalte

Tutorial zur Verwendung von Lauii

.

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung der Laui-Timeline. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!