[英]json2html - Create HTML table
我試圖找到好的 JS 插件來幫助我生成 HTML <table />
結構並用JSON數據填充它。
我找到了json2html ,但不幸的是,我在插件的官方網站上沒有看到任何有用的示例或文檔,也沒有我可以查看的任何 3rd 方網站。
我創建了一個function()
,它將為我生成一些隨機數據,我將在此演示示例中使用。 將 JSON 模板存儲在我將用於json2html 的變量中,並創建了一個帶有 ID 的<div />
,該 ID 將用於使用此插件解析 JSON 生成的數據。
// Demo function to generate random content
// ->
function generateChartData() {
for (var i = 0; i < 5; i++) {
var file_id = Math.floor(Math.random() * 90000) + 10000,
file_name = 'Dummy File ' + Math.floor(Math.random() * 20) + 30 + '.zip',
file_clicks = Math.round(Math.random() * 480) + 820,
file_downloads = Math.round(Math.random() * 160) + 420,
file_conversion = (file_clicks / file_downloads).toFixed(2),
file_profit = Math.round(Math.random() * 120) + 310,
file_cpa = (file_profit / file_downloads).toFixed(2),
file_epc = (file_profit / file_clicks).toFixed(2);
chartData.push({
file_id: file_id,
file_name: file_name,
file_clicks: file_clicks,
file_downloads: file_downloads,
file_conversion: file_conversion,
file_cpa: file_cpa,
file_epc: file_epc,
file_profit: file_profit
});
}
// create variables but no values
var total_clicks, total_downloads, total_conversion, total_profit, total_cpa, total_epc;
}
// <-
// Create html template for further json parsing
var template = {
"tag": "table",
"class": "table table-striped table-hover",
"children": [
{
"tag": "thead",
"id": "json-head",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "th",
"html": "ID"
},
{
"tag": "th",
"html": "File Name"
},
{
"tag": "th",
"html": "Clicks"
},
{
"tag": "th",
"html": "Downloads"
},
{
"tag": "th",
"html": "Conversion"
},
{
"tag": "th",
"html": "Average CPA"
},
{
"tag": "th",
"html": "EPC"
},
{
"tag": "th",
"html": "Profit"
}
]
}
]
},
{
"tag": "tbody",
"id": "json-body",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "td",
"html": "${file_id}"
},
{
"tag": "td",
"html": "${file_name}"
},
{
"tag": "td",
"html": "${file_clicks}"
},
{
"tag": "td",
"html": "${file_downloads}"
},
{
"tag": "td",
"html": "${file_conversion}"
},
{
"tag": "td",
"html": "${file_cpa}"
},
{
"tag": "td",
"html": "${file_epc}"
},
{
"tag": "td",
"html": "${file_profit}"
}
]
}
]
},
{
"tag": "tfoot",
"id": "json-foot",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "td",
"colspan": "2",
"html": "Total / Average"
},
{
"tag": "td",
"html": "${total_clicks}"
},
{
"tag": "td",
"html": "${total_downloads}"
},
{
"tag": "td",
"html": "${total_conversion}"
},
{
"tag": "td",
"html": "${total_cpa}"
},
{
"tag": "td",
"html": "${total_epc}"
},
{
"tag": "td",
"html": "${total_profit}"
}
]
}
]
}
]
};
// Empty array for json data
var chartData = [];
// Calling DEMO function to generate json data
generateChartData();
// Parse json data and generate html
$("#json-parse").json2html(chartData, template);
但是,您可能會注意到我的JSON模板或json2html調用有問題。 它創建無效表並為每個 JSON 數據解析生成表。 所以不幸的是,這不是我想要的。
我的想法是創建以下模板並將所需信息解析為<tbody />
& <tfoot />
但不要重新創建它們。
<table class="table table-striped table-hover">
<thead id="json-head">
<tr>
<th>ID</th>
<th>File Name</th>
<th>Clicks</th>
<th>Downloads</th>
<th>Conversion</th>
<th>Average CPA</th>
<th>EPC</th>
<th>Profit</th>
</tr>
</thead>
<tbody id="json-body">
<tr>
<td>${file_id}</td>
<td>${file_name}</td>
<td>${file_clicks}</td>
<td>${file_downloads}</td>
<td>${file_conversion}</td>
<td>${file_cpa}</td>
<td>${file_epc}</td>
<td>${file_profit}</td>
</tr>
</tbody>
<tfoot id="json-foot">
<tr>
<td colspan="2">Total / Average</td>
<td>${total_clicks}</td>
<td>${total_downloads}</td>
<td>${total_conversion}</td>
<td>${total_cpa}</td>
<td>${total_epc}</td>
<td>${total_profit}</td>
</tr>
</tfoot>
不幸的是,我無法提供 JSFiddle,因為我找不到任何 CDN。 但這里的屏幕截圖將向您展示不想要的結果是什么樣子。
我知道這是我的 JSON 結構或我沒有正確設置的插件調用,但如果你不介意在這里幫助我。 這確實令人頭疼,但也可能對其他用戶有所幫助。
json2Html正在循環內生成模板,該循環的計數器等於您的 json 對象計數。 所以你看到的結果沒有錯。 如果您不想重復頁眉和頁腳,只需將它們用作具有對象數組的另一個模板。
更新:例如感謝@Volune。
// Create html template for further json parsing
var headertemplate = {
"tag": "thead",
"id": "json-head",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "th",
"html": "ID"
},
{
"tag": "th",
"html": "File Name"
},
{
"tag": "th",
"html": "Clicks"
},
{
"tag": "th",
"html": "Downloads"
},
{
"tag": "th",
"html": "Conversion"
},
{
"tag": "th",
"html": "Average CPA"
},
{
"tag": "th",
"html": "EPC"
},
{
"tag": "th",
"html": "Profit"
}
]
}
]
}
var footertemplate = {
"tag": "tfoot",
"id": "json-foot",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "td",
"colspan": "2",
"html": "Total / Average"
},
{
"tag": "td",
"html": "${total_clicks}"
},
{
"tag": "td",
"html": "${total_downloads}"
},
{
"tag": "td",
"html": "${total_conversion}"
},
{
"tag": "td",
"html": "${total_cpa}"
},
{
"tag": "td",
"html": "${total_epc}"
},
{
"tag": "td",
"html": "${total_profit}"
}
]
}
]
}
var template = {
"tag": "table",
"class": "table table-striped table-hover",
"children": [
{
"tag": "tbody",
"id": "json-body",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "td",
"html": "${file_id}"
},
{
"tag": "td",
"html": "${file_name}"
},
{
"tag": "td",
"html": "${file_clicks}"
},
{
"tag": "td",
"html": "${file_downloads}"
},
{
"tag": "td",
"html": "${file_conversion}"
},
{
"tag": "td",
"html": "${file_cpa}"
},
{
"tag": "td",
"html": "${file_epc}"
},
{
"tag": "td",
"html": "${file_profit}"
}
]
}
]
}
]
};
// Empty array for json data
var chartData = [];
// Calling DEMO function to generate json data
generateChartData();
// Parse json data and generate html
$("#json-parse").json2html(chartData[0], headertemplate);
$("#json-parse").json2html(chartData, template);
$("#json-parse").json2html(chartData[0], footertemplate); //use your total json object with one array inside, instead chartData[0];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.