使用 jQuery 对来自 Ajax 的 JSON 数据进行分组

Question

我有以下数组，它是使用 PDO 从 MySQL 数据库中提取的。

[{
      "tbl":"1",
      "orid":"915",
      "date":"2021-12-30 12:46:48",
      "flag":0
   },
   {
      "tbl":"2",
      "orid":"914",
      "date":"2021-12-30 12:46:21",
      "flag":0
   },
   {
      "tbl":"3",
      "orid":"913",
      "date":"2021-12-30 12:45:00",
      "flag":0
   },
   {
      "tbl":"1",
      "orid":"911",
      "date":"2021-12-30 12:27:17",
      "flag":1
   }]

我正在尝试通过 Ajax 和 build/attach div 相应地检索此数据。它不起作用，因为我什至无法显示数据参数和键。这是成功（数据）函数：

$.each(data,function(i,j){
    content ='<span>'+j[i]+'<br /></span>';
    $('.timeline').append(content);
    });

我想按以下格式放置数据：

<div tbl="1">
<span class="header">Ref 1</span>
<div orid="915" class="order">...</div>
<div orid="911" class="order">...</div>
</div>
<div tbl="2">
<span class="header">Ref 2</span>
<div orid="914" class="order">...</div>
</div>
<div tbl="3">
<span class="header">Ref 3</span>
<div orid="913" class="order">...</div>
</div>

棘手的部分是将每个 order/orid 附加到现有的 tbl div 或者创建一个新的 tbl div 如果它不存在因为重复出现 ajax 调用（每次加载 10 行）。

Answer 1

这是您的示例数据的示例，我使用了 data-tbl 和 data-orid 属性而不是 tbl, orid。

const data = [{
    "tbl": "1",
    "orid": "915",
    "date": "2021-12-30 12:46:48",
    "flag": 0
  },
  {
    "tbl": "2",
    "orid": "914",
    "date": "2021-12-30 12:46:21",
    "flag": 0
  },
  {
    "tbl": "3",
    "orid": "913",
    "date": "2021-12-30 12:45:00",
    "flag": 0
  },
  {
    "tbl": "1",
    "orid": "911",
    "date": "2021-12-30 12:27:17",
    "flag": 1
  }
]


$.each(data, function(i, data) {
  let target = $(`div[data-tbl=${data.tbl}]`)
  if (target.length == 0) {
    target = $(`<div data-tbl="${data.tbl}"><span class="header">Ref ${data.tbl}</span></div>`);
    $('.timeline').append(target)
  }
  const content = `<div data-orid="${data.orid}" class="order">${data.orid}</div>`;
  target.append(content);
});

.header{
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="timeline"></div>

Answer 2

考虑以下因素。

$(function() {
  var resultData = [{
      "tbl": "1",
      "orid": "915",
      "date": "2021-12-30 12:46:48",
      "flag": 0
    },
    {
      "tbl": "2",
      "orid": "914",
      "date": "2021-12-30 12:46:21",
      "flag": 0
    },
    {
      "tbl": "3",
      "orid": "913",
      "date": "2021-12-30 12:45:00",
      "flag": 0
    },
    {
      "tbl": "1",
      "orid": "911",
      "date": "2021-12-30 12:27:17",
      "flag": 1
    }
  ];

  function makeNewTable(tableData, target) {
    if (tableData == undefined || target == undefined) {
      return false;
    }
    var tableId = tableData.tbl;
    var table = $("<div>", {
      id: "table-" + tableId,
      class: "table"
    }).appendTo(target);
    $("<div>", {
      class: "header"
    }).html("Ref " + tableId).appendTo(table);
    $("<div>", {
      class: "order"
    }).data("orid", tableData.orid).html(tableData.date).appendTo(table);
    $("<input>", {
      type: "checkbox",
    }).prop({
      checked: tableData.flag == 1 ? true : false,
      disabled: true
    }).appendTo(table);
  };

  function updateTable(newData, target) {
    if (newData == undefined || target == undefined) {
      return false;
    }
    $("<div>", {
      class: "order"
    }).data("orid", newData.orid).html(newData.date).appendTo(target);
    $("<input>", {
      type: "checkbox",
    }).prop({
      checked: newData.flag == 1 ? true : false,
      disabled: true
    }).appendTo(target);
  }

  function showData(data, target) {
    if (data == undefined || target == undefined) {
      return false;
    }
    var tbl;
    $.each(data, function(index, row) {
      if ($("#table-" + row.tbl).length == 0) {
        makeNewTable(row, $("#results-table"));
      } else {
        updateTable(row, $("#table-" + row.tbl));
      }
    });
  }

  showData(resultData, $("#results-table"));
});

.header {
  font-weight: bold;
  padding: 0.2em 0.4em;
}

.order {
  display: inline-block;
  padding: 0.2em 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results-table">
</div>

您可以在此处了解如何更轻松地使用 Functions 分解不同的场景。这样您就可以根据需要制作新的 Table 或更新现有的 table。

更新

您可以考虑使用 DataTables。示例：https://jsfiddle.net/Twisty/u6bdcsqz/51/

主要代码：

function makeTable(keys, data, parent) {
    var table = $("<table>").appendTo(parent);
    $("<thead>").appendTo(table);
    $("<tr>").appendTo($("thead", table));
    $.each(keys, function(i, k) {
      $("<th>").html(k).appendTo($("thead tr", table));
    });
    $("<tbody>").appendTo(table);
    var row;
    $.each(data, function(i, r) {
      row = $("<tr>").appendTo($("tbody", table));
      $("<td>").html("Table " + r.tbl).appendTo(row);
      $("<td>", {
        class: "order"
      }).html(r.orid).appendTo(row);
      $("<td>", {
        class: "date"
      }).html(r.date).appendTo(row);
      $("<td>", {
        class: "flag"
      }).html(r.flag == 1 ? "X" : "&nbsp;").appendTo(row);
    });
    var groupColumn = 0;
    dataTable = table.DataTable({
      "paging": false,
      "columnDefs": [{
        "visible": false,
        "targets": groupColumn
      }],
      "order": [
        [groupColumn, 'asc']
      ],
      "drawCallback": function(settings) {
        var api = this.api();
        var rows = api.rows({
          page: 'current'
        }).nodes();
        var last = null;

        api.column(groupColumn, {
          page: 'current'
        }).data().each(function(group, i) {
          if (last !== group) {
            $(rows).eq(i).before(
              '<tr class="group"><td colspan="3">' + group + '</td></tr>'
            );
            last = group;
          }
        });
      }
    });
    table.on('click', 'tr.group', function() {
      var currentOrder = table.order()[0];
      if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
        table.order([groupColumn, 'desc']).draw();
      } else {
        table.order([groupColumn, 'asc']).draw();
      }
    });
    console.log("Table created, " + data.length + " rows.");
  }

  function updateTable(data) {
    $.each(data, function(i, r) {
      dataTable.row.add(["Table " + r.tbl, r.orid, r.date, r.flag]).draw(false);
    });
    console.log("Table updated, added " + data.length + " rows.");
  }

  function showData(tableData, target) {
    if (tableData == undefined || target == undefined) {
      return false;
    }
    if ($("table", target).length > 0) {
      console.log("Table Found, updating");
      updateTable(tableData, $("table", target));
    } else {
      console.log("No Table, creating.");
      makeTable(["Table", "Order", "Date", "Flag"], tableData, target);
    }
  }

它比您想要的更多，但它提供了您所询问的所有功能。

使用 jQuery 对来自 Ajax 的 JSON 数据进行分组

Use jQuery to group JSON data coming from Ajax

javascript

ajax

jquery

json

jquery-ui