javascript - 按特定属性组织/分组 HTML 表格

Question

我会保持简短和甜蜜。我有一张 table ，可以打印我需要的一切。我想要做的是将程序 1 下的数据行组合在一起，而不是程序 1 打印、插入数据，然后再次打印，然后再打印另一组数据，我希望它看起来像“预期结果”表。每个程序将有超过 2 个，仅以此为例。我已经坚持了一段时间，似乎无法弄清楚。我还希望能够以并非所有内容都显示的方式折叠和展开这些行

实际结果:

**Expected Result** 
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program    | To                   |  Date     |   Approved | Notes        | Deliverable  |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 1  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 2  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 12/03/2017| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 3  | example@example.com  | 04/17/2020| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| No         | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+

这是我的代码:

<input type="text" id="myInput" onkeyup="searchTable()" placeholder="Search by Program Name" title="Enter Program Name">

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}
window.addEventListener("load", function () {
  Promise.all([
    loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
        .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
                tableContent += "<tr>";
                tableContent += "<td>" + objItems[i].Program + "</td>";
                tableContent += "</tr>";
                tableContent += "<tr>";
                tableContent += "<td> </td>";
                tableContent += "<td>" + objItems[i].To + "</td>";
                tableContent += "<td>" + objItems[i].Date + "</td>";
                tableContent += "<td>" + objItems[i].Approved + "</td>";
                tableContent += "<td>" + objItems[i].Notes + "</td>";
                tableContent += "<td>" + objItems[i].Deliverable + "</td>";
                tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

这里是 objItems 中返回的对象数组

{"Notes": "Example Notes", "Approved": "Yes", "Program": "Prorgam 1", "Date": "12/23/2018", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 1", "Date": "03/30/2020", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/23/2018", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/3/2017", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "No", "Program": "Program 3", "Date": "4/17/2020", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 3", "Date": "12/23/2018", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Meeting Minutes"},

Answer 1

如果您认为您需要在循环之前对数组进行排序和分组。 以下是替换 for 循环的示例。

<input type="text" id="myInput" onkeyup="searchTable()" placeholder="Search by Program Name" title="Enter Program Name">

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}
window.addEventListener("load", function () {
  Promise.all([
    loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
        .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";

      var sortedObj = {}
objItems.forEach(item => {
  var program = item.Program;
  delete(item.Program); //remove this line to keep the program in the item data
  if (!sortedObj[program]) {
    sortedObj[program] = [];
  }
  sortedObj[program].push(item);
});

//sort by deliverable
Object.keys(sortedObj).forEach(key => {
  sortedObj[key]
    .sort((a, b) => {
      if (a.Deliverable === b.Deliverable) {
        return 0;
      }
      return a.Deliverable > b.Deliverable ? 1 : -1;
    })
});

Object.keys(sortedObj).forEach((key, index) => {
  tableContent += "<tr id='parent-" + index + "' class='parent'>";
  tableContent += "<td>" + key + "</td>";
  tableContent += "</tr>";
  sortedObj[key].forEach(obj => {
    tableContent += "<tr class='child child-" + index + "'>";
    tableContent += "<td> </td>";
    tableContent += "<td>" + obj.To + "</td>";
    tableContent += "<td>" + obj.Date + "</td>";
    tableContent += "<td>" + obj.Approved + "</td>";
    tableContent += "<td>" + obj.Notes + "</td>";
    tableContent += "<td>" + obj.Deliverable + "</td>";
    tableContent += "</tr>";
  });
});
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});**strong text**