Quá trình sử dụng layui timeline:

Lưu ý rằng tài liệu chính thức của layui về timeline khá ít, có thể do tính đơn giản của nó. Dưới đây là cách tạo và hiển thị timeline bằng cách gọi dữ liệu từ backend, sau đó tự động điền vào các phần tương ứng.

Dưới đây là đoạn mã ví dụ:

  function hienThiTimeline(url, json, divId) {
    $.ajax({
      url: url,
      type: "post",
      data: json,
      dataType: "json",
      success: function (ketQua) {
        console.log(ketQua);
        if (ketQua.SUCCESS === true) {
          var danhSach = ketQua.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>";

          if (danhSach.length > 0) {
            var noiDung = "";
            noiDung += uls;
            for (var i = 0; i < danhSach.length; i++) {
              var noiDungPhanTu = "";
              noiDungPhanTu += lis + is + divs;
              if (danhSach[i].time && danhSach[i].time !== '') {
                noiDungPhanTu += h3s + taoThoiGian(danhSach[i].time) + h3s2;
              }
              if (danhSach[i].content && danhSach[i].content !== '') {
                noiDungPhanTu += ps + danhSach[i].content + ps2;
              }
              if (danhSach[i].ul && danhSach[i].ul.length > 0) {
                var danhSachCon = danhSach[i].ul;
                noiDungPhanTu += uls1;
                for (var j = 0; j < danhSachCon.length; j++) {
                  if (danhSachCon[j].content && danhSachCon[j].content !== '') {
                    noiDungPhanTu += lis1 + danhSachCon[j].content + lis2;
                  }
                }
                noiDungPhanTu += uls2;
              }

              noiDungPhanTu += divs2 + lis2;
              noiDung += noiDungPhanTu;
            }
            noiDung += uls2;

            document.getElementById(divId).innerHTML = noiDung;
          } else if (ketQua.SUCCESS === false) {
            layer.msg(ketQua.msg);
          }
        }
      }
    });
  }

  function taoThoiGian(thoiGian) {
    var ngay = new Date(thoiGian);
    var y = ngay.getFullYear();
    var m = ngay.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = ngay.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = ngay.getHours();
    h = h < 10 ? ('0' + h) : h;
    var ms = ngay.getMinutes();
    ms = ms < 10 ? ('0' + ms) : ms;
    var s = ngay.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    var str = y + "-" + m + "-" + d + " " + h + ":" + ms + ":" + s;
    return str;
  }

Cách gọi hàm:

var url = "./json/timeline/dome1.js";<br></br>var json = {}; <br></br>hienThiTimeline(url, json, "div1"); // url là địa chỉ yêu cầu dữ liệu, json là tham số, div1 là id của phần tử HTML để hiển thị timeline

Giải thích tham số:

• url: Địa chỉ thực tế để yêu cầu dữ liệu từ backend.
• json: Tham số yêu cầu.
• divId: ID của phần tử HTML để hiển thị timeline.

Định dạng phản hồi dữ liệu:

{
  "SUCCESS": true,
  "data": [
    {
      "time": "2019-01-04 11:00:42",
      "content": "Đây là nội dung thử nghiệm",
      "ul": [
        { "content": "Nội dung con 1" },
        { "content": "Nội dung con 2" }
      ]
    },
    {
      "time": 1546571007000,
      "content": "Đây là nội dung thử nghiệm",
      "ul": [
        { "content": "Nội dung con 1" },
        { "content": "Nội dung con 2" }
      ]
    },
    ...
  ],
  "msg": "Yêu cầu thành công!"
}

Giải thích trường dữ liệu:

• "SUCCESS": Trạng thái phản hồi từ API.
• "data": Nội dung của timeline.
• "time": Thời gian của dòng thời gian (có thể là timestamp hoặc định dạng thời gian).
• "content": Nội dung chính.
• "ul": Danh sách nội dung con.
• "msg": Thông tin phản hồi, được sử dụng khi "SUCCESS" là false.