如何将动态结构化的 XML 转换为 table?
How to convert an dynamically structured XML to a table?
如果您将 XML 链接加载到 https://www.convertcsv.com/xml-to-csv.htm(通过使用 输入 URL),您会立即得到一个不错的 table:
你怎么能在事先不知道XML的结构的情况下直接在PHP中做呢?
示例代码和URL:
<?php
url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
echo '<pre>' . print_r($input, true) . '<pre>';
?>
这给你:
这是我最终的做法 - https://paiza.io/projects/-ouYa8tFfqcH8QeaVeQfIw(这个 fiddle 测试仪对输出有限制,所以我在那里使用 5
而不是 count($array)
):
<?php
$url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
$json = json_encode($input);
$array = json_decode($json,TRUE)['Contents'];
header('Content-Type: text/html; charset=utf-8');
?>
<head>
<style>
table2 {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {cursor: pointer;}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<table id="sortable">
<?php
for ($i=0; $i<count($array); $i++) {
if ($i==0)
echo "<thead>\n";
echo "<tr>\n";
foreach ($array[$i] as $key => $value)
echo ($i==0 ? "<th>$key ↕</th>" : "<td>" . ($key == 'Key' ? "<a href=\"$url/$value\">$value</a>" : $value) . "</td>") . "\n";
echo "</tr>\n";
if ($i==0)
echo "</thead>\n<tbody>\n";
}
?>
</tbody>
</table>
<script>document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('sortable');
const headers = table.querySelectorAll('th');
const tableBody = table.querySelector('tbody');
const rows = tableBody.querySelectorAll('tr');
// Track sort directions
const directions = Array.from(headers).map(function(header) {
return '';
});
// Transform the content of given cell in given column
const transform = function(index, content) {
// Get the data type of column
const type = headers[index].getAttribute('data-type');
switch (type) {
case 'number':
return parseFloat(content);
case 'string':
default:
return content;
}
};
const sortColumn = function(index) {
// Get the current direction
const direction = directions[index] || 'asc';
// A factor based on the direction
const multiplier = (direction === 'asc') ? 1 : -1;
const newRows = Array.from(rows);
newRows.sort(function(rowA, rowB) {
const cellA = rowA.querySelectorAll('td')[index].innerHTML;
const cellB = rowB.querySelectorAll('td')[index].innerHTML;
const a = transform(index, cellA);
const b = transform(index, cellB);
switch (true) {
case a > b: return 1 * multiplier;
case a < b: return -1 * multiplier;
case a === b: return 0;
}
});
// Remove old rows
[].forEach.call(rows, function(row) {
tableBody.removeChild(row);
});
// Reverse the direction
directions[index] = direction === 'asc' ? 'desc' : 'asc';
// Append new row
newRows.forEach(function(newRow) {
tableBody.appendChild(newRow);
});
};
[].forEach.call(headers, function(header, index) {
header.addEventListener('click', function() {
sortColumn(index);
});
});
});</script>
如果您将 XML 链接加载到 https://www.convertcsv.com/xml-to-csv.htm(通过使用 输入 URL),您会立即得到一个不错的 table:
你怎么能在事先不知道XML的结构的情况下直接在PHP中做呢?
示例代码和URL:
<?php
url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
echo '<pre>' . print_r($input, true) . '<pre>';
?>
这给你:
这是我最终的做法 - https://paiza.io/projects/-ouYa8tFfqcH8QeaVeQfIw(这个 fiddle 测试仪对输出有限制,所以我在那里使用 5
而不是 count($array)
):
<?php
$url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
$json = json_encode($input);
$array = json_decode($json,TRUE)['Contents'];
header('Content-Type: text/html; charset=utf-8');
?>
<head>
<style>
table2 {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {cursor: pointer;}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<table id="sortable">
<?php
for ($i=0; $i<count($array); $i++) {
if ($i==0)
echo "<thead>\n";
echo "<tr>\n";
foreach ($array[$i] as $key => $value)
echo ($i==0 ? "<th>$key ↕</th>" : "<td>" . ($key == 'Key' ? "<a href=\"$url/$value\">$value</a>" : $value) . "</td>") . "\n";
echo "</tr>\n";
if ($i==0)
echo "</thead>\n<tbody>\n";
}
?>
</tbody>
</table>
<script>document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('sortable');
const headers = table.querySelectorAll('th');
const tableBody = table.querySelector('tbody');
const rows = tableBody.querySelectorAll('tr');
// Track sort directions
const directions = Array.from(headers).map(function(header) {
return '';
});
// Transform the content of given cell in given column
const transform = function(index, content) {
// Get the data type of column
const type = headers[index].getAttribute('data-type');
switch (type) {
case 'number':
return parseFloat(content);
case 'string':
default:
return content;
}
};
const sortColumn = function(index) {
// Get the current direction
const direction = directions[index] || 'asc';
// A factor based on the direction
const multiplier = (direction === 'asc') ? 1 : -1;
const newRows = Array.from(rows);
newRows.sort(function(rowA, rowB) {
const cellA = rowA.querySelectorAll('td')[index].innerHTML;
const cellB = rowB.querySelectorAll('td')[index].innerHTML;
const a = transform(index, cellA);
const b = transform(index, cellB);
switch (true) {
case a > b: return 1 * multiplier;
case a < b: return -1 * multiplier;
case a === b: return 0;
}
});
// Remove old rows
[].forEach.call(rows, function(row) {
tableBody.removeChild(row);
});
// Reverse the direction
directions[index] = direction === 'asc' ? 'desc' : 'asc';
// Append new row
newRows.forEach(function(newRow) {
tableBody.appendChild(newRow);
});
};
[].forEach.call(headers, function(header, index) {
header.addEventListener('click', function() {
sortColumn(index);
});
});
});</script>