javascript - 按特定属性组织/分组 HTML 表格
问题描述
我会保持这个简短而甜蜜的。我有一张桌子,可以打印出我需要的所有东西。我想要做的是将程序 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"},
解决方案
如果认为您需要在循环之前对数组进行排序和分组。这是替换 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**
推荐阅读
- c# - 一段时间过去后,如何依次启用布尔值?
- javascript - 为什么 React Hooks 不更新数据
- bash - 将文件名缩短为 n 个字符,同时保留文件扩展名
- java - 如何启用点的坐标作为输入
- python - Python - 欧几里得距离不同大小的向量
- android - 如何在 kotlin 中使用改造来解析 xml 响应?
- php - 如何从数据库中获取值并将其放在 json_encoded 的 php 文件中的某个括号中?
- php - 如果在 Laravel 中找不到页面,则为 404 页
- python - TFIDF 为每个标签分开
- django - 在 Anaconda 上使用 Django 和 Django 有区别吗